How to modify the style dictionary configuration file to output the typography tokens as SCSS Variables

Question

I am all new to design tokens and design system. I am trying to convert my design tokens as SCSS variables using the style dictionary it looks like everything working fine except the typography tokens are resulting as [object object] in the variable file. Not sure what I am doing wrong. Any help would be appreciated. Below is my config file for style dictionary.

const StyleDictionary = require('style-dictionary');


module.exports = {
  // This will match any files ending in json or json5
  source: [`tokens/*.json`],

  transforms: [
  {
    type: 'typography',
    fields: {
      fontSize: 'fontsize',
      fontWeight: 'fontWeight',
      lineHeight: 'lineHeight',
    },
  },
],

  platforms: {
    scss: {
      buildPath: `style/`,
      files: [{
        destination: `_variables.scss`,
        format: `scss/variables`
      }]
    }
  }
}

MY Token JSON is

{
  "btn": {
    "primary": {
      "default": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "hover": {
        "value": "{colors.accent.l_sun}",
        "type": "color"
      },
      "focus": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "click": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "txtcolor": {
        "value": "{colors.neutral.black}",
        "type": "color"
      }
    },
    "disabled": {
      "value": "{colors.neutral.ll_grey}",
      "type": "color"
    },
    "radius": {
      "value": ".4rem",
      "type": "borderRadius"
    },
    "brwidth": {
      "value": ".2rem",
      "type": "borderWidth"
    },
    "ghostbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "ghost": {
      "defaultbr": {
        "value": "{colors.primary.m_blue}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.d_blue}",
        "type": "color"
      },
      "clickbr": {
        "value": "{colors.neutral.ll_grey}",
        "type": "color"
      }
    },
    "transparent": {
      "defaultbr": {
        "value": "{colors.neutral.white}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.azure}",
        "type": "color"
      },
      "click": {
        "value": "{colors.primary.azure}",
        "type": "color"
      }
    },
    "transparentbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "textcolor": {
      "value": "{colors.primary.m_blue}",
      "type": "color"
    }
  },
  "btn-df": {
    "padding": {
      "value": "1.6rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-smtypography": {
    "value": {
      "fontSize": "1.4rem",
      "fontWeight": "",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-mdtypography": {
    "value": {
      "fontSize": "1.6rem"
    },
    "type": "typography"
  },
  "btn-dftypographystyles": {
    "value": {
      "fontWeight": "400",
      "lineHeight": "120%"
    },
    "type": "typography"
  },
  "btn-md": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-sm": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  }
}

Answer 1

Based on the code and token JSON file provided, it appears that the typography values are not being transformed properly into SCSS variables.

The issue could be with the way the "value" property is set in the typography token. Currently, it is an object and not a string, which is causing it to be displayed as [object object]. To fix this, you need to set the value as a string with a format that the typography transform can parse and use to create the desired SCSS variables.

e.g. Collapse the value object into a single string.

Here is an example of what the btn-dftypography token could look like after being fixed:

"btn-dftypography": {
  "value": "font-size: 1.8rem; font-weight: 400; line-height: 120%",
  "type": "typography"
}

Before, it's like this:

 "btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },

NOTE: You will need to make similar changes to the other typography tokens as well.