我對設計代幣和設計系統都是新手。我正在嘗試使用樣式字典將我的設計標記轉換為 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" } } }
根據提供的程式碼和令牌 JSON 文件,排版值似乎未正確轉換為 SCSS 變數。
問題可能與
"value"
屬性在版式標記中的設定方式有關。目前,它是一個物件而不是字串,這導致它顯示為[object object]
。 要解決此問題,您需要將該值設定為具有排版轉換可以解析並用於建立所需 SCSS 變數的格式的字串。例如將值物件折疊成單一字串。
以下是
btn-dftypography
令牌修復後的範例:以前是這樣的:
注意:您還需要對其他排版標記進行類似的變更。