为Flutter的样式字典中Figma的设计标记编写自定义转换文件

Question

我有barebone Flutter 2.5项目和Figma设计令牌，通过Figma令牌导出。这些设计标记看起来像这样:

项目属性 style_dictionary 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 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_dictionary的CMD中运行style-dictionary build将生成下一个文件

项目 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);
}

问题:我如何以及在哪里可以创建样式字典转换文件，以创建正确的dart文件与静态变量的Color类型?我不能修改导出的设计令牌。

Answer 1

1. 创建一个项目build.js作为自定义的transform文件。创建逻辑使用默认的扑动颜色变换和文档

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. Modifyprojectstyle_dictionaryconfig。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