디자인 토큰 생성기
입력한 primary color를 포함하는 작은 CSS custom property token block을 생성합니다.
사용 방법
- primary color 값을 입력하고 실행합니다.
핵심 기능과 처리 범위
현재 구현은 --color-primary에 입력값 또는 기본 #176b5b를 넣고 --space-sm, --space-md, --radius-md를 고정 예시 값으로 출력합니다.
처리 원리
고정 :root template에 color와 0.5rem, 1rem, 0.75rem token을 삽입합니다.
예시
#ff0000을 넣으면 --color-primary: #ff0000인 :root block이 생성됩니다.
이럴 때 유용합니다
- 새 UI의 최소 design-token 예시 block을 빠르게 만들 때
사용 전 참고
- 색상 유효성 검사·palette 생성·전체 design system token 설계는 하지 않습니다.
자주 묻는 질문
spacing 값도 입력할 수 있나요?
아닙니다. 현재 spacing과 radius 값은 고정 예시입니다.