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

85 Views Asked by At

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;

0

There are 0 best solutions below