8-digit hex codes by default

[jkarttunen]

I got 8 digit hex colors by default. I'm assuming there is some way to config token-transformer to not do this:

@tokens-white: #ffffffff;

[d01000100]

Not at the moment through the client. Definitely should be a feature, or use rgba notation by default even.

[jkarttunen]

If i read this correctly, it could be possible with configuration objects?

[d01000100]

I just double checked and I don't think it's possible to add transforms and transform groups through the configuration object. They need to be created on a node process with registerTransform and registerTransformGroup (example of custom transform).

What you could do in the meantime is to use this engine for fetching the tokens from figma only. There's no official way to do this yet, but you could take advantage of the "inputFile" property of .tokens.config.json. The engine will write into that location the tokens read from Figma, before calling StyleDictionary.

From that file, you could configure you're own StyleDictionary instance to parse them into stylesheets.

---

Also, you could for this source code and add the transformer yourself. You'd need to add the transformer on src/style-dictionary/transformers.ts, for example something like:

StyleDictionary.registerTransform({
  name: "color/rgba",
  type: 'value',
  matcher: token => {
    const originalToken = token.original as DesignToken
    return originalToken.type === "color"
    // maybe also check if the color is an 8-bit value? (originalToken.value)
  },
  transformer(token) {
    /* The transformation code. Here you'd return the rgba color value as a string. */
  },
})

/* The token looks like */
token: {
  value: '#3E1C96',
  type: 'color',
  description: 'A color to be cooler',
  filePath: '/var/folders/wj/tz_vd6ns30jg2d34fy3_yztm0000gn/T/tmp-13152-86GVQkL13kIt',
  isSource: true,
  original: {
    value: '#3E1C96',
    type: 'color',
    description: 'A color to be cooler'
  },
  name: 'fill-cta-primary-cool',
  attributes: { category: 'Fill', type: 'Cta', item: 'Primary', subitem: 'Cool' },
  path: [ 'Fill', 'Cta', 'Primary', 'Cool' ]
}

And add that transformer to the relevant transform groups on src/style-dictionary/transform-groups.ts:

StyleDictionary.registerTransformGroup({
  name: TransformGroup.webCSS,
  transforms: [
    ...globalTransformers,
    ...stylesheetTransformers,
    ...webTransformers,
    "color/rgba"
  ],
})

---

Side note: The 8-digit notation is currently valid on all major browsers most updated versions

[d01000100]

https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color#browser_compatibility

[jkarttunen]

Yes, tried this config, and it still outputs color/hex8

{
  "platforms": {
    "js": {
      "transforms": ["attribute/cti", "name/cti/pascal", "size/rem", "color/hex"],
      "files": [
        {
          "destination": "es6.js",
          "format": "javascript/es6"
        }
      ]
    }
  }
}

[d01000100]

Yes. The main issue with the built in StyleDictionary transforms, is that most of them match the tokens with their category meta data, which is inferred by the first part of the name of the token.

This structure was not very compatible on how my organization was defining the tokens, either as Figma Styles or Figma Tokens, so the transforms the FTE uses internally, match the tokens by the custom type field I introduced.

You may try to name your tokens with the appropiate category at the first part of the name (color-background-button-primary) and that may make the built-in transforms to work.