Merge pull request #19 from ubie-oss/typography

Add Typography tokens

scripts/figma.js

@@ -7,6 +7,7 @@ const writeFile = promisify(fs.writeFile);
 const TOKEN = process.env.FIGMA_TOKEN;
 const FIGMA_FILE_KEY = process.env.FIGMA_DESIGN_TOKEN_FILE_KEY;
 const PREFIX = 'Ubie';
+const ROOT_FONT_SIZE = 16;
 
 const fetchFigma = (path) =>
   fetch(`https://api.figma.com/v1/files/${FIGMA_FILE_KEY}${path}`, {
@@ -107,7 +108,7 @@ const main = async () => {
     .filter(({ document }) => document.name.includes('Spacing'))
     .forEach(({ document }) => {
       const name = document.name.split('/')[1].toLowerCase();
-      const value = Number(document.absoluteBoundingBox.width) / 16;
+      const value = Number(document.absoluteBoundingBox.width) / ROOT_FONT_SIZE;
       spacings[name] = {
         value: value,
       };
@@ -121,9 +122,56 @@ const main = async () => {
     },
   });
 
+  // Generate Typography tokens
+  const typography = {};
+  Object.values(styleNodes)
+    .filter(({ document }) => document.type === 'TEXT')
+    .sort((a, b) => a.document.name.localeCompare(b.document.name))
+    .forEach(({ document }) => {
+      const name = document.name.split('/');
+      const category = name[0].toLowerCase();
+      const scale = name[1].toLowerCase();
+      const lineHeight = document.style.lineHeightPercentFontSize / 100;
+      const fontSize = document.style.fontSize / ROOT_FONT_SIZE + 'rem';
+
+      if (category in typography) {
+        typography[category][scale] = {
+          line: {
+            value: lineHeight,
+          },
+          size: {
+            value: fontSize,
+          },
+        };
+      } else {
+        typography[category] = {
+          [scale]: {
+            line: {
+              value: lineHeight,
+            },
+            size: {
+              value: fontSize,
+            },
+          },
+        };
+      }
+    });
+
+  const typographyContent = JSON.stringify({
+    text: {
+      ...typography,
+      base: {
+        family: {
+          value: 'UDShinGoPr6N, sans-serif',
+        },
+      },
+    },
+  });
+
   await writeFile(path.resolve(__dirname, '../tokens/color/primitive.json'), primitiveColorContent);
   await writeFile(path.resolve(__dirname, '../tokens/color/semantics.json'), semanticsColorContent);
   await writeFile(path.resolve(__dirname, '../tokens/size/spacing.json'), spacingContent);
+  await writeFile(path.resolve(__dirname, '../tokens/text/typography.json'), typographyContent);
   console.log('DONE');
 };
 

tokens/text/typography.json

@@ -0,0 +1 @@
+{"text":{"body":{"lg":{"line":{"value":1.7},"size":{"value":"1.125rem"}},"lg-narrow":{"line":{"value":1.5},"size":{"value":"1.125rem"}},"lg-tight":{"line":{"value":1.4},"size":{"value":"1.125rem"}},"md":{"line":{"value":1.7},"size":{"value":"1rem"}},"md-narrow":{"line":{"value":1.5},"size":{"value":"1rem"}},"md-tight":{"line":{"value":1.4},"size":{"value":"1rem"}},"sm":{"line":{"value":1.7},"size":{"value":"0.875rem"}},"sm-narrow":{"line":{"value":1.5},"size":{"value":"0.875rem"}},"sm-tight":{"line":{"value":1.4},"size":{"value":"0.875rem"}},"xs":{"line":{"value":1.7},"size":{"value":"0.8125rem"}},"xs-narrow":{"line":{"value":1.5},"size":{"value":"0.8125rem"}},"xs-tight":{"line":{"value":1.4},"size":{"value":"0.8125rem"}}},"button":{"lg":{"line":{"value":1.4},"size":{"value":"1rem"}},"md":{"line":{"value":1.4},"size":{"value":"0.875rem"}},"sm":{"line":{"value":1.4},"size":{"value":"0.8125rem"}}},"heading":{"lg":{"line":{"value":1.4},"size":{"value":"1.5rem"}},"md":{"line":{"value":1.4},"size":{"value":"1.25rem"}},"sm":{"line":{"value":1.5},"size":{"value":"1.125rem"}},"xl":{"line":{"value":1.4},"size":{"value":"1.75rem"}},"xs":{"line":{"value":1.5},"size":{"value":"1rem"}}},"note":{"lg":{"line":{"value":1.7},"size":{"value":"0.8125rem"}},"lg-narrow":{"line":{"value":1.5},"size":{"value":"0.8125rem"}},"lg-tight":{"line":{"value":1.4},"size":{"value":"0.8125rem"}},"md":{"line":{"value":1.7},"size":{"value":"0.75rem"}},"md-narrow":{"line":{"value":1.5},"size":{"value":"0.75rem"}},"md-tight":{"line":{"value":1.4},"size":{"value":"0.75rem"}},"sm":{"line":{"value":1.7},"size":{"value":"0.625rem"}},"sm-narrow":{"line":{"value":1.5},"size":{"value":"0.625rem"}},"sm-tight":{"line":{"value":1.4},"size":{"value":"0.625rem"}}},"tag":{"lg":{"line":{"value":1.4},"size":{"value":"0.8125rem"}},"md":{"line":{"value":1.4},"size":{"value":"0.75rem"}},"sm":{"line":{"value":1.4},"size":{"value":"0.625rem"}}},"base":{"family":{"value":"UDShinGoPr6N, sans-serif"}}}}