Saya baru dalam kedua-dua mereka bentuk token dan mereka bentuk sistem. Saya cuba menggunakan kamus gaya untuk menukar penanda reka bentuk saya kepada pembolehubah SCSS dan semuanya nampaknya berfungsi dengan baik kecuali penanda tipografi ternyata [object object] dalam fail pembolehubah. Tidak pasti apa yang saya lakukan salah. Sebarang bantuan amatlah dihargai. Di bawah ialah fail konfigurasi untuk kamus gaya saya.

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

Token saya JSON ialah

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