标签: style-dictionary

我有与此线程完全相同的问题：使用样式字典从设计令牌 json 文件中获取 scss。这个线程中提到的答案很好，但是有没有办法指定一些设置，以便样式字典自动将样式对象转换为上述线程中答案中提到的方式？

我基本上想转换

"Display-2xl": {
    "Regular": {
      "value": {
        "fontFamily": "{fontFamilies.inter.value}",
        "fontWeight": "{fontWeights.inter-0.value}",
        "fontSize": "$fontSize.10",
      },
      "type": "typography"
    },
}

到

"Display-2xl": {
    "Regular": {
      "type": "typography",
      "fontFamily": {
        "value": "{fontFamilies.inter.value}"
      },
      "fontWeight": {
        "value": "{fontWeights.inter-0.value}"
      },
      "fontSize": {
        "value": "{fontSize.10}"
      }
    }
  }

通过添加一些格式/转换。我怎样才能实现这个目标？

我的 config.json 对象：

const StyleDictionary = require("style-dictionary").extend({
  source: ["./tokens.json"],
  platforms: {
    scss: {
      transformGroup: "scss",
      buildPath: "src/tokens/",
      files: [
        {
          destination: "_colors.scss",
          format: "scss/variables",
          filter: {
            type: "color",
          },
        },
        { …

我有以下button.json

{
  "component": {
  "button": {
    "padding": { "value": "{size.padding.medium.value}" },
    "font-size": { "value": 2 },
    "text-align": { "value": "center" },
  
    "primary": {
      "background-color": { "value": "hsl(10, 80, 50)" },
      "color": { "value": "{color.font.inverse.value}" }
    },
  
    "secondary": {
      "background-color": { "value": "{color.background.primary.value}" },
      "color": { "value": "{color.font.link.value}" }
    }
  }
}

我可以使用亚马逊样式字典生成样式标记。我想要生成的是 json 中的完整 sass css。

例如：

.component-button {

    padding: " ";
    font-size: " ";

    & .primary {
        background-color: "",
        color: ""
    }
}