flutter - 在 Flutter 的 Style Dictionary 中为来自 Figma 的设计令牌编写自定义转换文件

Question

我有准系统 Flutter 2.5 项目和 Figma 设计令牌，它们是通过Figma Tokens导出的。这些设计标记如下所示：

项目\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"
        }
      }
    }
  }
}

和样式字典配置看起来像这样

项目\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"
                        }
                    }
                }
            ]
        }
    }
}

在style_dictionarystyle-dictionary build中的 CMD 中运行将生成下一个文件

项目\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = #ffebee;
}

但是最后应该是这样的

项目\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = Color(0xFFFFEBEE);
}

问题：如何以及在哪里可以创建样式字典转换文件以创建具有Color静态变量类型的正确 dart 文件？我无法修改导出的设计令牌。

Answer 1

1. 创建一个project\build.js作为自定义转换文件。使用默认 Flutter 颜色转换和文档创建的逻辑

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. 修改project\style_dictionary\config.json以便它可以从项目目录执行并包含新的转换 - “transformColorsToColor”以及来自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. npm init使用所有默认答案运行
4. 跑npm install --save tinycolor2
5. 跑node build.js