@toktokhan-dev/cli-plugin-gen-theme-chakra NPM

@toktokhan-dev/cli-plugin-gen-theme-chakra

@toktokhan-dev/cli 의 plugin 입니다. theme json 파일기반으로 Chakra theme token 생성합니다. theme json 은 Toktoken 피그마 플러그인에서 제공하는 json 파일입니다. 자세한 사항은 Toktoken 가이드 와 Tokdocs 공식 문서에서 확인 할 수 있습니다.

Preview

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

// @/generated/theme/colors.ts

/**
 * !DO NOT EDIT THIS FILE
 *
 * gnerated by script: tokript gen:theme
 *
 * theme color 를 정의하는 곳입니다.
 * dark 모드를 대응하기 위해 semantic token 을 사용해서 정의합니다.
 *
 * @see https://chakra-ui.com/docs/styled-system/semantic-tokens
 **/

export const colorSchema = {
  'grey.100': '#f5f5f5',
  ...
}

export const colors = {
  'support.success.accent': {
    default: colorSchema['green.700'],
    _dark: colorSchema['green.500'],
  },
  ...
}

// @/generated/theme/textStyles.ts

/**
 * !DO NOT EDIT THIS FILE
 *
 * gnerated by script: tokript gen:theme
 *
 * theme text style 을 정의하는 곳입니다.
 *
 * @see https://chakra-ui.com/docs/styled-system/semantic-tokens
 **/

export const textStyles = {
  'pre-display-01': {
    fontWeight: 800,
    fontFamily: 'Pretendard Variable',
    fontSize: {
      base: '48px',
      sm: '80px',
      md: '80px',
    },
    lineHeight: {
      base: '150%',
      sm: '139.9999976158142%',
      md: '139.9999976158142%',
    },
    letterSpacing: '-0.02em',
    textDecoration: 'none',
  },
  ...
}

Installation

npm i -D @toktokhan-dev/cli @toktokhan-dev/cli-plugin-gen-theme-chakra

Register Plugin

tok-cli.config.ts 에서 config 정의가 가능합니다. 각 plugin 별로 option 을 정의하고, 해당 plugin 을 등록하여 사용할 수 있습니다. 자세한 내용은 Tokdocs 공식 문서에서 확인 할 수 있습니다.

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

const config: RootConfig<{
  plugins: [typeof genTheme]
}> = {
  plugins: [genTheme],
}