Search code examples
sassfrontendtokenstyle-dictionarydesign-tokens

How to add more unit type (px, rem) in output of design tokens in style dictionary (amzn)

As you guys know if we config in config.json with "transformGroup": "scss" the size will be implied as rem unit

{
  "source": ["src/styledictionary/tokens/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "src/styles/tokens/",
      "files": [{
        "destination": "_variables.scss",
        "format": "scss/variables"
      }]
    }
  }
}

But I want some certain token has px unit in the same json file such as:

{
  "size": {
    "font": {
      "xss"  : { "value": "0.66" },
      "xs"  : { "value": "0.85" },
      "s" : { "value": "1" },
      "m": { "value": "1.14" },
      "l" : { "value": "1.43" },
      "xl"    : { "value": "1.71" },
      "xxl"   : { "value": "2.29" },
      "base"  : { "value": "14px"}
    }
  }
}

I want to has a base font size = 14px and other variant has rem unit, then if I run style dictionary build I got all of the as rem unit but $size-font-base: 14rem; should be $size-font-base: 14px;

I tried to find this configuration if document but I couldn't, please help me! Thank you guys so muchh!!


// Do not edit directly
// Generated on Wed, 03 Jan 2024 10:40:20 GMT

$size-font-xss: 0.66rem;
$size-font-xs: 0.85rem;
$size-font-s: 1rem;
$size-font-m: 1.14rem;
$size-font-l: 1.43rem;
$size-font-xl: 1.71rem;
$size-font-xxl: 2.29rem;
$size-font-base: 14rem;
Solution

  • I am having a similar problem right now.

    My tokens come as floats and my style dictionary doesn't add anything as a unit for floats when exporting to CSS or SCSS.

    As it only needs to end up as workable CSS for me now I opted to work with CSS variables and the CSS calc() function (e.g. see Adding a unit to a number in Sass and https://developer.mozilla.org/en-US/docs/Web/CSS/calc?retiredLocale=de ).

    So I let style dictionary create a CSS variable export file and use it with a mapping file, where I create the required values via CSS calc(), e.g. multiplying them either with 1px or 1rem, based on the requirements.