从图中编写设计标记的自定义转换文件

Question

我有巴黎人颤振2.5项目和Figma设计令牌，这是通过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"
        }
      }
    }
  }
}

和风格词典配置，如下所示

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中运行style_dictionary中的CMD将生成下一个文件

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 变换文件，以便使用静态变量的Color类型创建正确的省道文件？我无法修改导出的设计令牌。

Answer 1

1. 将project\build.js创建为自定义转换文件。默认颤振颜色变换和文档使用了创建逻辑。

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()

1. 修改project\style_dictionary\config.json，以便它可以从项目目录执行，并包括新的转换-- "transformColorsToColor“以及来自颤动的其他转换。

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

1. 使用所有默认答案运行npm init
2. 运行npm install --save tinycolor2
3. 运行node build.js