如何修改样式字典配置文件，将排版标记输出为SCSS变量

Question

我对设计代币和设计系统都是新手。我正在尝试使用样式字典将我的设计标记转换为 SCSS 变量，看起来一切正常，除了排版标记在变量文件中结果为 [object object] 。不确定我做错了什么。任何帮助，将不胜感激。下面是我的样式字典的配置文件。

const StyleDictionary = require('style-dictionary');


module.exports = {
  // This will match any files ending in json or json5
  source: [`tokens/*.json`],

  transforms: [
  {
    type: 'typography',
    fields: {
      fontSize: 'fontsize',
      fontWeight: 'fontWeight',
      lineHeight: 'lineHeight',
    },
  },
],

  platforms: {
    scss: {
      buildPath: `style/`,
      files: [{
        destination: `_variables.scss`,
        format: `scss/variables`
      }]
    }
  }
}

我的令牌 JSON 是

{
  "btn": {
    "primary": {
      "default": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "hover": {
        "value": "{colors.accent.l_sun}",
        "type": "color"
      },
      "focus": {
        "value": "{colors.accent.sun}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "click": {
        "value": "{colors.accent.gold}",
        "type": "color"
      },
      "txtcolor": {
        "value": "{colors.neutral.black}",
        "type": "color"
      }
    },
    "disabled": {
      "value": "{colors.neutral.ll_grey}",
      "type": "color"
    },
    "radius": {
      "value": ".4rem",
      "type": "borderRadius"
    },
    "brwidth": {
      "value": ".2rem",
      "type": "borderWidth"
    },
    "ghostbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "ghost": {
      "defaultbr": {
        "value": "{colors.primary.m_blue}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.d_blue}",
        "type": "color"
      },
      "clickbr": {
        "value": "{colors.neutral.ll_grey}",
        "type": "color"
      }
    },
    "transparent": {
      "defaultbr": {
        "value": "{colors.neutral.white}",
        "type": "color"
      },
      "focusbr": {
        "value": "{colors.primary.azure}",
        "type": "color"
      },
      "click": {
        "value": "{colors.primary.azure}",
        "type": "color"
      }
    },
    "transparentbg": {
      "value": "{colors.neutral.white}",
      "type": "color"
    },
    "textcolor": {
      "value": "{colors.primary.m_blue}",
      "type": "color"
    }
  },
  "btn-df": {
    "padding": {
      "value": "1.6rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-smtypography": {
    "value": {
      "fontSize": "1.4rem",
      "fontWeight": "",
      "lineHeight": ""
    },
    "type": "typography"
  },
  "btn-mdtypography": {
    "value": {
      "fontSize": "1.6rem"
    },
    "type": "typography"
  },
  "btn-dftypographystyles": {
    "value": {
      "fontWeight": "400",
      "lineHeight": "120%"
    },
    "type": "typography"
  },
  "btn-md": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  },
  "btn-sm": {
    "padding": {
      "value": "1.4rem 3.2rem",
      "type": "spacing"
    }
  }
}

Answer 1

根据提供的代码和令牌 JSON 文件，排版值似乎未正确转换为 SCSS 变量。

问题可能与 "value" 属性在版式标记中的设置方式有关。目前，它是一个对象而不是字符串，这导致它显示为 [object object]。 要解决此问题，您需要将该值设置为具有排版转换可以解析并用于创建所需 SCSS 变量的格式的字符串。

例如将值对象折叠成单个字符串。

以下是 btn-dftypography 令牌修复后的示例：

"btn-dftypography": {
  "value": "font-size: 1.8rem; font-weight: 400; line-height: 120%",
  "type": "typography"
}

以前是这样的：

"btn-dftypography": {
    "value": {
      "fontWeight": "",
      "fontSize": "1.8rem",
      "lineHeight": ""
    },
    "type": "typography"
  },

注意：您还需要对其他排版标记进行类似的更改。