← 글 목록

notes

UI - Design token

2 min read

UI Design Token의 색상·간격·타이포그래피 정의와 관리 기준 메모.

Kim mr.

프론트엔드 · 기술 블로그

pnpm add -D @tokens-studio/sd-transforms sd-tailwindcss-transformer

const { registerTransforms } = require('@tokens-studio/sd-transforms');
const StyleDictionary = require('style-dictionary');

registerTransforms(StyleDictionary);

module.exports = {
  source: ["design-tokens.json"],
  platforms: {
    // css
    css: {
      transformGroup: "css",
      buildPath: "packages/ui/src/styles/",
      files: [{
        destination: "tokens.css",
        format: "css/variables"
      }]
    },
    // scss
    scss: {
      transformGroup: "scss",
      buildPath: "packages/ui/src/styles/",
      files: [{
        destination: "_tokens.scss",
        format: "scss/variables",
      }]
    },
    // tailwind
    tailwind: {
      transformGroup: "tokens-studio",
      buildPath: "packages/ui/",
      files: [{
        destination: "tailwind.theme.js",
        format: "javascript/es6",
        options: {
          usePostScriptFontNames: true
        }
      }]
    }
  }
};