본문으로 건너뛰기

Next steps for developer

Prepare​

token json 파일이 프로젝트 경로에 다운로드 되었는지 확인해주세요.

정보

token json 은 Toktoken 피그마 플러그인에서 제공하는 json 파일입니다. 자세한 사항은 Toktoken 가이드를 참고해주세요.

token json example
token.json

{
  "colors": {
    "colorSchema": {
      "grey-white": {
        "id": "VariableID:3162:9787",
        "value": "#ffffff"
      },
      ...
    },
    "semanticTokens": {
      "support-success-accent": {
        "light": {
          "id": "VariableID:3162:9888",
          "refId": "VariableID:3162:9820",
          "ref": "green-700",
          "value": "#216e3b"
        },
        "dark": {
          "id": "VariableID:3162:9888",
          "refId": "VariableID:3162:9818",
          "ref": "green-500",
          "value": "#22a04c"
        }
      }
      ...
    },
  },
  "textStyles": {
    "pre-display-01": {
      "fontWeight": 800,
      "fontFamily": "Pretendard Variable",
      "fontSize": "120px",
      "lineHeight": "139.9999976158142%",
      "letterSpacing": "-2%",
      "textDecoration": "none"
    },
    ...
  }
}

Installation​

필요한 패키지를 다운로드 합니다.

  • @toktokhan-dev/cli: 다양한 스크립트를 실행, 등록할 수 있는 패키지입니다.
  • @toktokhan-dev/cli-plugin-gen-theme-chakra: json 을 읽어 chakra-ui theme 파일을 생성하는 패키지입니다.
yarn add -D @toktokhan-dev/cli @toktokhan-dev/cli-plugin-gen-theme-chakra
정보

플러그인 생성, 실행에 관련하여 더 자세히 알고싶다면 Toktokhan CLI 가이드 를 참고해주세요.

Configuration​

tok-cli.config.ts
import { RootConfig } from '@toktokhan-dev/cli';
import { genTheme } from '@toktokhan-dev/cli-plugin-gen-theme-chakra';

const config: RootConfig<{
  plugins: [typeof genTheme]; // option 타입 정의
}> = {
  plugins: [genTheme], // 플러그인 등록
  'gen:theme': { // 플러그인 옵션
    inputPath: 'public/token.json'
    outputPath: 'src/generated/theme'
  },
};

export default config;

Run Script​

npx tokript gen:theme
팁

자주 사용될 수 있는 스크립트는 협업간 편의성을 위해 package.json에 등록하는걸 권장 드립니다.

package.json
{
  ...
  "scripts": {
    "tokript": "tokript",
    "gen:theme": "tokript gen:theme"
  }
}
bash
yarn gen:theme or yarn tokript

To Chakra Theme​

gen:theme 스크립트 실행 후 생성된 파일을 chakra-ui theme 파일로 등록합니다.

theme/index.ts
   import { extendTheme } from '@chakra-ui/react';
   import { textStyles } from '@/generated/theme/textStyles';
   import { colors } from '@/generated/theme/colors';

   const theme = {
     semanticTokens: {
       colors: : {
         ...colors
       }
     },
     textStyles: {
       ...textStyles
     },
     breakpoints: {
       // breakpoints
     },
     components: {
       // components
     },
     ...
   }