use dimension/px transformer instead of custom

primer · Sep 9, 2024 · e9e3235 · e9e3235
1 parent b988a52
commit e9e3235
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 36 deletions.
diff --git a/packages/design-tokens/scripts/style-dictionary.js b/packages/design-tokens/scripts/style-dictionary.js
@@ -13,45 +13,11 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 // functions to be extracted
 // TODO: extract to a separate files
 
-// REGISTER THE CUSTOM TRANFORMS
-
-// find values with px unit
-function isPx(value) {
-  return /[\d.]+px$/.test(value)
-}
-
-// transform: px to rem
-StyleDictionary.registerTransform({
-  name: 'pxToRem',
-  type: 'value',
-  transformer: token => {
-    if (isPx(token.value)) {
-      const baseFontSize = 16
-      const floatValue = parseFloat(token.value.replace('px', ''))
-
-      if (isNaN(floatValue)) {
-        return token.value
-      }
-
-      if (floatValue === 0) {
-        return '0'
-      }
-
-      if (token.name.includes('lineHeight')) {
-        return `${floatValue / baseFontSize}`
-      }
-
-      return `${floatValue / baseFontSize}rem`
-    }
-    return token.value
-  },
-})
-
 // REGISTER THE CUSTOM TRANFORM GROUPS
 
 StyleDictionary.registerTransformGroup({
   name: 'css',
-  transforms: ['name/pathToKebabCase', 'pxToRem', 'typography/css'],
+  transforms: ['name/pathToKebabCase', 'dimension/rem', 'typography/css'],
 })
 
 // REGISTER A CUSTOM FORMAT

diff --git a/packages/design-tokens/src/tokens/functional/size/border.json b/packages/design-tokens/src/tokens/functional/size/border.json
@@ -37,6 +37,7 @@
       },
       "full": {
         "value": "9999px",
+        "$type": "dimension",
         "comment": "Use this border radius for pill shaped elements"
       }
     }

diff --git a/packages/design-tokens/src/tokens/functional/size/size.json b/packages/design-tokens/src/tokens/functional/size/size.json
@@ -61,7 +61,8 @@
       },
       "large": {
         "size": {
-          "value": "60px"
+          "value": "60px",
+          "$type": "dimension"
         },
         "lineBoxHeight": {
           "value": "{base.size.20}"