converting line height to pixel value (#905)

* converting line height to pixel value * floatToPixel
primer · Apr 19, 2024 · e7d3c6c · e7d3c6c
1 parent 7934ec3
commit e7d3c6c
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 11 deletions.
diff --git a/.changeset/few-seas-invite.md b/.changeset/few-seas-invite.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Convert lineHeight from float to pixel value for figma
diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts
@@ -28,6 +28,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     // 'name/pathToSlashNotation',
     'figma/attributes',
     'fontFamily/figma',
+    'float/pixel',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',

diff --git a/src/tokens/functional/typography/typography.json b/src/tokens/functional/typography/typography.json
@@ -34,8 +34,8 @@
   "text": {
     "display": {
       "lineBoxHeight": {
-        "$value": "56px",
-        "$type": "dimension",
+        "$value": 1.4,
+        "$type": "number",
         "$extensions": {
           "org.primer.data": {
             "fontSize": 40
@@ -52,7 +52,16 @@
       },
       "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}",
@@ -87,15 +96,42 @@
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 32
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.6,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 20
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
@@ -187,15 +223,42 @@
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.4285,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 14
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.6666,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 12
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
@@ -242,7 +305,16 @@
       },
       "lineHeight": {
         "$value": 1.3333,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 12
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
@@ -266,7 +338,16 @@
       },
       "lineHeight": {
         "$value": 1.5385,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 13
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",