Write custom transform file for design tokens from Figma in Style Dictionary for Flutter

Question

I have barebone Flutter 2.5 project and Figma design tokens which were exported via Figma Tokens. Those design tokens look like this:

project\style_dictionary\properties\tokens.json

{
  "borderWidth": {
    "100": {
      "value": "1.5",
      "type": "borderWidth"
    }
  },
  "opacity": {
    "basic": {
      "100": {
        "value": "0.04",
        "type": "opacity"
      }
    }
  },
  "colors": {
    "basic": {
      "red": {
        "50": {
          "value": "#ffebee",
          "type": "color"
        }
      }
    }
  }
}

and Style Dictionary config which looks like this

project\style_dictionary\config.json

{
    "source": [
        "properties/*.json"
    ],
    "platforms": {
        "flutter": {
            "transformGroup": "flutter",
            "buildPath": "../lib/unique_file/",
            "files": [
                {
                    "destination": "style_dictionary.dart",
                    "format": "flutter/class.dart",
                    "className": "StyleDictionary"
                }
            ]
        },
        "flutter-separate": {
            "transformGroup": "flutter-separate",
            "buildPath": "../lib/unique_file/",
            "files": [
                {
                    "destination": "style_dictionary_color.dart",
                    "format": "flutter/class.dart",
                    "className": "StyleDictionaryColor",
                    "type": "color",
                    "filter": {
                        "attributes": {
                            "category": "colors"
                        }
                    }
                }
            ]
        }
    }
}

Running style-dictionary build in CMD in style_dictionary will generate next file

project\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = #ffebee;
}

But in should be like that at the end

project\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = Color(0xFFFFEBEE);
}

Question: How and where can I create Style Dictionary transforms file to create right dart file with Color type of the static variable? I cannot modify exported design tokens.

Answer 1

1. Create a project\build.js as a custom Transforms file. Logic of creation was used from default Flutter color transforms and Documentation

const StyleDictionary = require('style-dictionary')
const baseConfig = require('./style_dictionary/config.json')
const Color = require('tinycolor2')

StyleDictionary.registerTransform({
    name: 'colors/hex8flutter',
    type: 'value',
    matcher: prop => {
        return prop.attributes.category === 'colors'
    },
    transformer: prop => {
        var str = Color(prop.value).toHex8().toUpperCase();
        return `Color(0x${str.slice(6)}${str.slice(0, 6)})`;
    },
})

const StyleDictionaryExtended = StyleDictionary.extend(baseConfig)

StyleDictionaryExtended.buildAllPlatforms()

2. Modify project\style_dictionary\config.json so it can be executed from project directory and include new transforms - "transformColorsToColor" together with other transforms from Flutter

{
    "source": [
        "style_dictionary/properties/*.json"
    ],
    "platforms": {
        "flutter": {
            "transforms": ["attribute/cti", "name/cti/camel", "color/hex8flutter", "size/flutter/remToDouble", "content/flutter/literal", "asset/flutter/literal", "font/flutter/literal", "colors/hex8flutter"],
            "buildPath": "lib/unique_file/",
            "files": [
                {
                    "destination": "style_dictionary.dart",
                    "format": "flutter/class.dart",
                    "className": "StyleDictionary"
                }
            ]
        },
        "flutter-separate": {
            "transforms": ["attribute/cti", "name/ti/camel", "color/hex8flutter", "size/flutter/remToDouble", "content/flutter/literal", "asset/flutter/literal", "font/flutter/literal", "colors/hex8flutter"],
            "buildPath": "lib/unique_file/",
            "files": [
                {
                    "destination": "style_dictionary_color.dart",
                    "format": "flutter/class.dart",
                    "className": "StyleDictionaryColor",
                    "type": "color",
                    "filter": {
                        "attributes": {
                            "category": "colors"
                        }
                    }
                }
            ]
        }
    }
}

3. Run npm init with all default answers
4. Run npm install --save tinycolor2
5. Run node build.js