在 Style Dictionary for Flutter 中为来自 Figma 的设计标记编写自定义转换文件

Question

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

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"
        }
      }
    }
  }
}

和Style Dictionary 配置如下所示

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"
                        }
                    }
                }
            ]
        }
    }
}

运行 style-dictionary build in CMD in style_dictionary 会生成下一个文件

project\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = #ffebee;
}

不过最后应该是这样的

project\lib\unique_file\style_dictionary_color.dart

import 'dart:ui';

class StyleDictionaryColor {
  StyleDictionaryColor._();

    static const basicRed50 = Color(0xFFFFEBEE);
}

问题：如何以及在何处创建 Style Dictionary transforms 文件以创建具有静态变量 Color 类型的正确 dart 文件？我无法修改导出的设计标记。

Answer 1

创建一个 project\build.js 作为自定义转换文件。使用了 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()

修改 project\style_dictionary\config.json 以便它可以从项目目录中执行并包含新的转换 - “transformColorsToColor”以及来自 [= 的其他转换16=]

{
    "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"
                        }
                    }
                }
            ]
        }
    }
}

运行 npm init 所有默认答案
运行 npm install --save tinycolor2
运行 node build.js

在 Style Dictionary for Flutter 中为来自 Figma 的设计标记编写自定义转换文件

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

flutter

figma

style-dictionary

design-tokens