converting line height to pixel value

.changeset/few-seas-invite.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Convert lineHeight from float to pixel value for figma

src/PrimerStyleDictionary.ts

@@ -23,6 +23,7 @@ import {
   shadowToCss,
   typographyToCss,
   dimensionToRemPxArray,
+  convertWithFontSizeToPixel,
 } from './transformers'
 import {
   javascriptCommonJs,
@@ -132,6 +133,11 @@ StyleDictionary.registerTransform({
   ...colorToHex,
 })
 
+StyleDictionary.registerTransform({
+  name: 'convertWithFontSize/pixel',
+  ...convertWithFontSizeToPixel,
+})
+
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,

src/platforms/figma.ts

@@ -28,6 +28,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     // 'name/pathToSlashNotation',
     'figma/attributes',
     'fontFamily/figma',
+    'convertWithFontSize/pixel',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',

src/tokens/functional/typography/typography.json

@@ -34,16 +34,34 @@
   "text": {
     "display": {
       "lineBoxHeight": {
-        "$value": "56px",
-        "$type": "dimension"
+        "$value": 1.4,
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "size": {
         "$value": "40px",
         "$type": "dimension"
       },
       "lineHeight": {
         "$value": 1.4,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.medium}",

src/transformers/convertWithFontSizeToPixel.ts

@@ -0,0 +1,34 @@
+import type StyleDictionary from 'style-dictionary'
+import {isNumber} from '../filters'
+/**
+ * takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
+ * @param value
+ * @returns string
+ */
+export const convertNumberWithFontSize = (token: StyleDictionary.TransformedToken, unitless?: boolean) => {
+  // short circut if value is not a number
+  if (
+    typeof token.value !== 'number' ||
+    !token.$extensions?.['org.primer.data']?.fontSize ||
+    typeof token.$extensions?.['org.primer.data']?.fontSize !== 'number'
+  ) {
+    return token.value
+  }
+  // convert value
+  const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
+  // return converted value
+  return unitless ? convertedValue : `${convertedValue}px`
+}
+/**
+ * @description converts fontFamily tokens value to string
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `fontFamily`
+ * @transformer returns a string
+ */
+export const convertWithFontSizeToPixel: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isNumber,
+  transformer: (token: StyleDictionary.TransformedToken, platform: StyleDictionary.Platform): string =>
+    convertNumberWithFontSize(token, platform.options?.unitless ?? false),
+}

src/transformers/index.ts

@@ -4,6 +4,7 @@ export {colorToHexAlpha} from './colorToHexAlpha'
 export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
+export {convertWithFontSizeToPixel} from './convertWithFontSizeToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'