@toktokhan-dev/cli-plugin-gen-theme-chakra
v0.0.15
Published
A CLI plugin for generating Chakra UI themes built by TOKTOKHAN.DEV
Downloads
652
Readme
@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],
}
Run Script
tokript2
명령어로 각 플러그인으로 등록된 기능들을 사용할 수 있습니다.
npx tokript2 gen:theme