본문으로 건너뛰기

gen:theme (Chakra UI)

theme json 파일기반으로 Chakra theme token 생성합니다.

정보

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

theme.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": "140%",
      "letterSpacing": "-2%",
      "textDecoration": "none"
    },
    "pre-display-02": {
      "fontWeight": 800,
      "fontFamily": "Pretendard Variable",
      "fontSize": {
        "mobile": "72px",
        "tablet": "80px",
        "pc": "90px"
      },
      "lineHeight": {
        "mobile": "120%",
        "tablet": "130%",
        "pc": "140%"
      },
      "letterSpacing": "-1%",
      "textDecoration": "none"
    },
    ...
  }
}

Installation​

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

Run Script​

command 를 별도로 입력하지 않으면 대화형으로 실행되어 등록되어있는 스크립트 중 선택하여 사용이 가능합니다.

npx tokript

command 를 입력하면 해당 스크립트가 바로 실행됩니다.

npx tokript gen:theme
팁

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

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

Configuration​

tok-cli.config.ts 에서 config 정의가 가능합니다.

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

const config: RootConfig<{
plugins: [typeof genTheme]
}> = {
plugins: [genTheme],
'gen:theme': {
  ...
},
}

export default config

input​

  • Required: false
  • Type: string
  • Default: public/token.json
  • Cli Option:--input -i
theme.json 경로입니다.

config​

tok-cli.config.ts
{
'gen:theme': {
  input: 'public/token.json',
  ...
},
}

cli

tokript gen:theme --input "public/token.json"

output​

  • Required: false
  • Type: string
  • Default: src/generated/tokens
  • Cli Option:--output -o
chakra theme token이 생성되는 폴더입니다.

config​

tok-cli.config.ts
{
'gen:theme': {
  output: 'src/generated/tokens',
  ...
},
}

cli

tokript gen:theme --output "src/generated/tokens"

tokenMode​

  • Required: false
  • Type: {colors?: ColorModes; textStyles?: TextStyleModes;}
  • Default: {colors: { light: 'light', dark: 'dark' }}
  • Cli Option: -
types
type ColorModes = {
  light: string
  dark?: string
}
type TextStyleModes = Partial<Record<BreakPoints, string>>
type BreakPoints = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
Semantic token color mode의 키 값을 지정할 수 있습니다.

config​

tok-cli.config.ts
{
'gen:theme': {
  tokenMode: { 
colors: { light: 'mode_1', dark: 'mode_2' }, 
textStyles: { base: 'mobile', sm: 'tablet', md: 'pc' }
},
  ...
},
}

추출된 theme.json 에서 colors colorMode, text style의 중단점(breakpoints)에 따른 키값을 지정할 수 있습니다.

theme.json
"colors" : {
"semanticTokens": {
  "text-primary": {
    "mode_1": {  // tokenMode를 통해 light 또는 dark모드로 지정할 수 있습니다.
      "id": "VariableID:4083:3222",
      "refId": "VariableID:4083:2575",
      "ref": "grey-800",
      "value": "#333333"
    },
    "mode_2": { // tokenMode를 통해 light 또는 dark모드로 지정할 수 있습니다.
      "id": "VariableID:1:1482",
      "refId": "VariableID:43:1393",
      "ref": "grey-600",
      "value": "#ececec"
    }
  },
  "textStyles": {
    ...,
    "pre-display-02": {
      "fontWeight": 800,
      "fontFamily": "Pretendard Variable",
      // tokenMode를 통해 breakPoint에 맞게 지정할 수 있습니다. 객체가 아닌경우는 값을 그대로 리턴합니다.
      "fontSize": { 
        "mobile": "72px", 
        "tablet": "80px",
        "pc": "90px"
      },
      "lineHeight": {
        "mobile": "120%",
        "tablet": "130%",
        "pc": "140%"
      },
      "letterSpacing": "-1%",
      "textDecoration": "none"
    },
  }

} 
}
semanticToken인데, 참조하는 값(variable)이 없는 이유가 뭔가요?

일반적으로 Semantic Token은 기본 색상(예: grey.500)을 참조하여 해당 색상값(예: #8f8f8f)을 가져옵니다. 하지만 디자인과 개발이 병렬적으로 진행되는 상황에서는, 디자인 단계에서 임의로 컬러 값을 지정해야 할 때가 있습니다. 이러한 경우, 해당 토큰에는 참조 값이 존재하지 않으며, 직접 지정한 값만 들어가게 됩니다. 이는 디자인과 개발 간의 유연성을 제공하기 위한 조치입니다.

semantic token이 참조하는 값이 없을 경우

"background-test": {
  "light": {
    "id": null,
    "refId": null,
    "ref": null,
    "value": "#ffffff"
  },
  "dark": {
    "id": "VariableID:4966:1337",
    "refId": "VariableID:43:1458",
    "ref": "violet-200",
    "value": "#b8acf6"
  }
},