feat(tokens): use rem sizing for font size

narmi · Jun 3, 2024 · 06c3036 · 06c3036
1 parent 5abab4e
commit 06c3036
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/tokens/config.js b/tokens/config.js
@@ -42,7 +42,8 @@ const config = {
      * Custom properties in a CSS file
      */
     css: {
-      transforms: CSS_TRANSFORM_GROUP,
+      basePxFontSize: 16,
+      transforms: [...CSS_TRANSFORM_GROUP, "custom/value/pxToRem"],
       buildPath: getBuildPath("css"),
       files: [
         {

diff --git a/tokens/util/transforms.js b/tokens/util/transforms.js
@@ -40,7 +40,7 @@ const nameTransforms = [
     matcher: ({ attributes }) =>
       _matchByAttribute(
         ["theme", "alpha", "space", "elevation"],
-        attributes.type
+        attributes.type,
       ),
     transformer: ({ attributes }) => {
       const { type, item } = attributes;
@@ -120,7 +120,7 @@ const valueTransforms = [
     transformer: ({ original }) => parseFloat(original.value),
     matcher: ({ attributes }) =>
       ["radius", "size", "alpha", "lineHeight", "space"].some(
-        (allowedType) => attributes.type === allowedType
+        (allowedType) => attributes.type === allowedType,
       ),
   },
   {
@@ -133,6 +133,22 @@ const valueTransforms = [
       return `${r}, ${g}, ${b}`;
     },
   },
+  // transforms a pixel font size to rem based on base font size
+  // (base font size is configured in `tokens/config.js`)
+  {
+    name: "custom/value/pxToRem",
+    type: "value",
+    matcher: ({ attributes }) => {
+      const { category, type } = attributes;
+      return type === "size" && category === "font";
+    },
+    transformer: (token, options) => {
+      const base = (options && options.basePxFontSize) || 16;
+      const floatVal = parseFloat(token.value);
+      if (floatVal === 0) return floatVal;
+      return `${floatVal / base}rem`;
+    },
+  },
 ];
 
 module.exports = [...nameTransforms, ...valueTransforms];