Converting typography tokens to CSS

[nareshbhatia]

I have typography tokens in the Figma plugin similar to this:

{
  "h1": {
    "value": {
      "fontFamily": "{font-family.font-sans}",
      "fontWeight": "{font-weight.light}",
      "lineHeight": "{line-height.h1}",
      "fontSize": "{font-size.h1}",
      "letterSpacing": "{letter-spacing.h1}",
      "paragraphSpacing": "{paragraph-spacing.0}",
      "textCase": "{text-case.none}",
      "textDecoration": "{text-decoration.none}"
    },
    "type": "typography"
  }
}

When this gets converted to css by the style dictionary I get a single CSS variable with two objects like this:

--h1: [object Object];

What I was expecting was a class like this:

.h1 {
  font-family: var(--font-family-font-sans);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h1);
  font-size: var(--font-size-h1);
  letter-spacing: var(--letter-spacing-h1);
  paragraphSpacing: var(--paragraph-spacing-0);
  textCase: var(--text-case-none);
  textDecoration: var(--text-decoration-none);
}

What is the intended output and how can it be used in a CSS selector?

[six7]

First of all: Style Dictionary doesn't yet have proper composite token support. That means that any subvalues in a token won't run through the transformator, however the setup you have above will work as each value is using an alias token on its own.

There's two ways how you can accomplish this:

A) Generate CSS classes for each typography style by using a custom format that only triggers on type: typography

function getTypographyConfig() {
  console.log("Building typography ");

  return {
    source: [
      "tokens/01_base/**/*.+(json)",
      "tokens/03_semantic/typography.json",
    ],
    platforms: {
      css: {
        transforms: [
          "resolveMath",
          "size/px",
          "type/fontWeight",
          "size/letterspacing",
          "name/cti/kebab",
        ],
        buildPath: `dist/css/`,
        files: [
          {
            destination: `base/typography-classes.css`,
            format: "css/typographyClasses",
            selector: ":root",
            filter: (token) => token.type === "typography",
          },
        ],
      },
    },
  };
}

/**
 * Format for css typography classes
 */
StyleDictionary.registerFormat({
  name: "css/typographyClasses",
  formatter: function (dictionary, config) {
    return `
${dictionary.allProperties
  .map((prop) => {
    return `
.${prop.name} {
  font: var(--${prop.name});
  letter-spacing: ${convertToVariableIfNeeded(
    prop.original.value.letterSpacing
  )};
  text-transform: ${convertToVariableIfNeeded(prop.original.value.textCase)};
  text-decoration: ${convertToVariableIfNeeded(
    prop.original.value.textDecoration
  )};
}`;
  })
  .join("\n")}
  `;
  },
});

B) Generate css shorthands for typography styles using the font prop:

/**
 * Transform typography shorthands for css variables
 */
StyleDictionary.registerTransform({
  name: "typography/shorthand",
  type: "value",
  transitive: true,
  matcher: (token) => token.type === "typography",
  transformer: (token) => {
    const { original } = token;
    return `${original.value.fontWeight} ${original.value.fontSize}/${original.value.lineHeight} ${original.value.fontFamily}`;
  },
});

[nareshbhatia]

Thank you @six7, exactly what I was looking for. Will give it a shot.