[WIP] separate typography tokens (#165)

* separate typography tokens

Author: lukasoppermann

src/config/defaultSettings.ts

@@ -19,6 +19,7 @@ export const defaultSettings: Settings = {
   prefix: {
     color: 'color',
     gradient: 'gradient',
+    typography: 'typography',
     font: 'font',
     effect: 'effect',
     grid: 'grid',
@@ -33,6 +34,7 @@ export const defaultSettings: Settings = {
     color: true,
     gradient: true,
     font: true,
+    typography: true,
     effect: true,
     grid: true,
     border: true,

src/config/tokenTypes.ts

@@ -9,9 +9,14 @@ export const tokenTypes = {
     key: 'gradient'
   },
   font: {
-    label: 'Fonts',
+    label: 'Font Styles',
     key: 'font'
   },
+  typography: {
+    label: 'Typography',
+    key: 'typography',
+    exclude: ['original']
+  },
   effect: {
     label: 'Effects',
     key: 'effect'

src/transformer/originalFormatTransformer.ts

@@ -2,7 +2,6 @@ import { internalTokenInterface, tokenCategoryTypes } from '@typings/propertyObj
 import { OriginalFormatTokenInterface } from '@typings/originalFormatProperties'
 import { convertRgbaObjectToString } from '../utilities/convertColor'
 import { PropertyType, UnitTypePixel } from '@typings/valueTypes'
-import { tokenExtensions } from './tokenExtensions'
 import config from '@config/config'
 
 const sizeValueTransformer = ({ width }) => ({
@@ -185,8 +184,7 @@ const transformer = (token: internalTokenInterface): OriginalFormatTokenInterfac
     category: token.category,
     exportKey: token.extensions[config.key.extensionPluginData].exportKey,
     ...(token.description && token.description.length > 0 && { comment: token.description }),
-    ...(valueTransformer[token.category as tokenCategoryTypes](token.values) || {}),
-    ...tokenExtensions(token)
+    ...(valueTransformer[token.category as tokenCategoryTypes](token.values) || {})
   }
 }
 

src/transformer/standardTransformer.ts

@@ -69,7 +69,7 @@ const spacingValueTransformer = ({ values }): StandardTokenDataInterface => ({
   }
 })
 
-const fontValueTransformer = ({ values }): StandardTokenDataInterface => ({
+const fontStyleValueTransformer = ({ values }): StandardTokenDataInterface => ({
   type: 'custom-fontStyle' as StandardTokenTypes,
   value: {
     fontSize: values.fontSize.value,
@@ -86,6 +86,53 @@ const fontValueTransformer = ({ values }): StandardTokenDataInterface => ({
   }
 })
 
+const typographyValueTransformer = ({ name, values }) => ({
+  fontSize: {
+    type: 'dimension' as StandardTokenTypes,
+    value: values.fontSize.value
+  },
+  textDecoration: {
+    type: 'string' as StandardTokenTypes,
+    value: values.textDecoration.value
+  },
+  fontFamily: {
+    type: 'string' as StandardTokenTypes,
+    value: values.fontFamily.value
+  },
+  fontWeight: {
+    type: 'number' as StandardTokenTypes,
+    value: values.fontWeight.value
+  },
+  fontStyle: {
+    type: 'string' as StandardTokenTypes,
+    value: values.fontStyle.value
+  },
+  fontStretch: {
+    type: 'string' as StandardTokenTypes,
+    value: values.fontStretch.value
+  },
+  letterSpacing: {
+    type: 'dimension' as StandardTokenTypes,
+    value: letterSpacingToDimensions(values)
+  },
+  lineHeight: {
+    type: 'dimension' as StandardTokenTypes,
+    value: lineHeightToDimension(values)
+  },
+  paragraphIndent: {
+    type: 'dimension' as StandardTokenTypes,
+    value: values.paragraphIndent.value
+  },
+  paragraphSpacing: {
+    type: 'dimension' as StandardTokenTypes,
+    value: values.paragraphSpacing.value
+  },
+  textCase: {
+    type: 'string' as StandardTokenTypes,
+    value: values.textCase.value
+  }
+})
+
 const colorValueTransformer = ({ fill }): StandardTokenDataInterface => ({
   type: 'color' as StandardTokenTypes,
   value: rgbaObjectToHex8(fill.value)
@@ -182,7 +229,7 @@ const valueTransformer = {
   size: widthToDimensionTransformer,
   color: fillValueTransformer,
   gradient: fillValueTransformer,
-  font: fontValueTransformer,
+  font: fontStyleValueTransformer,
   effect: effectValueTransformer,
   grid: gridValueTransformer,
   border: borderValueTransformer,
@@ -195,6 +242,14 @@ const valueTransformer = {
 const transformTokens = (token: internalTokenInterface): StandardTokenDataInterface | StandardTokenGroup => valueTransformer[token.category](token)
 
 const transformer = (token: internalTokenInterface): StandardTokenInterface | StandardTokenGroup => {
+  if (token.category === 'typography') {
+    // @ts-ignore
+    return {
+      name: token.name,
+      description: token.description,
+      ...typographyValueTransformer(token)
+    }
+  }
   // @ts-ignore
   return {
     name: token.name,

src/ui/components/FileExportSettings.tsx

@@ -91,13 +91,16 @@ export const FileExportSettings = () => {
       </Row>
       <Title size='large' weight='bold'>Include types in export</Title>
       <div className='grid-3-col'>
-        {Object.entries(tokenTypes).map(([, { key, label }]) =>
-          <Checkbox
-            key={key}
-            label={label}
-            checked={settings.exports[key]}
-            onChange={value => updateSettings((draft: Settings) => { draft.exports[key] = value })}
-          />)}
+        {Object.entries(tokenTypes)
+          // @ts-ignore
+          .map(([, { key, label, exclude = undefined }]) =>
+            (exclude === undefined || !exclude.includes(settings.tokenFormat)) &&
+              <Checkbox
+                key={key}
+                label={label}
+                checked={settings.exports[key]}
+                onChange={value => updateSettings((draft: Settings) => { draft.exports[key] = value })}
+              />)}
       </div>
       <Footer>
         <WebLink align='start' href='https://github.com/lukasoppermann/design-tokens#design-tokens'>Documentation</WebLink>

src/utilities/prepareExport.ts

@@ -3,15 +3,35 @@ import { Settings } from '../../types/settings'
 import { transformer as originalFormatTransformer } from '@src/transformer/originalFormatTransformer'
 import { transformer as standardTransformer } from '@src/transformer/standardTransformer'
 import { groupByKeyAndName } from '@utils/groupByName'
+import { tokenTypes } from '@config/tokenTypes'
+import { tokenCategoryType } from '@typings/tokenCategory'
+import { tokenExportKeyType } from '@typings/tokenExportKey'
+import config from '@config/config'
 
 const tokenTransformer = {
   original: originalFormatTransformer,
   standard: standardTransformer
 }
 
+const createTypographyTokens = (tokens: internalTokenInterface[], format) => {
+  if (format === 'standard') {
+    return JSON.parse(JSON.stringify(tokens.filter(item => item.category === tokenTypes.font.key)))
+      .map(item => {
+        item.name = 'typography/' + item.name.substr(item.name.indexOf('/') + 1).trim().trimStart()
+        item.category = tokenTypes.typography.key as tokenCategoryType
+        item.exportKey = tokenTypes.typography.key as tokenExportKeyType
+        item.extensions[config.key.extensionPluginData].exportKey = tokenTypes.typography.key as tokenCategoryType
+        return item
+      })
+  }
+  return []
+}
+
 export const prepareExport = (tokens: string, settings: Settings) => {
   // parse json string
-  const tokenArray: internalTokenInterface[] = JSON.parse(tokens)
+  let tokenArray: internalTokenInterface[] = JSON.parse(tokens)
+  // duplicate font if typography is true && format = standard
+  tokenArray = [...tokenArray, ...createTypographyTokens(tokenArray, settings.tokenFormat)]
   // filter by user setting for export keys
   const tokensFiltered: internalTokenInterface[] = tokenArray.filter(({ exportKey }) => settings.exports[exportKey])
   // converted values