chromatic

Chromatic은 디자인 토큰을 설명하는 소스 파일로부터 플랫폼별 파일을 생성하여 디자인 시스템을 관리하는 도구입니다. README에서는 이를 디자인 토큰을 사용하는 크로스 플랫폼 디자인 시스템을 위한 빌드 시스템으로 설명합니다. 토큰 파일은 자연스러운 구문의 풍부한 표현식을 포함할 수 있습니다. 예로는 18pt + 5px와 같은 산술 연산, 12px와 같은 단위, rgb(), mix(), saturate()와 같은 함수, 그리고 다른 토큰에 대한 참조가 있습니다. primary-hue라는 이름의 토큰을 210deg로 설정하고, primary를 hsl({primary-hue}, 100%, 40%)로 정의하며, primary-dark가 darken 변환과 함께 primary를 참조하도록 설정할 수 있습니다. 이를 통해 값 사이의 관계를 표현하면서도 토큰 정의를 간결하게 유지할 수 있습니다. Chromatic은 테마를 지원합니다. 각 토큰은 dark 및 light, 또는 compact 및 cozy 레이아웃과 같은 테마 변형을 가질 수 있으며, 필요한 출력 결과물은 자동으로 생성됩니다. 예를 들어, cta-button-background 토큰은 dark 및 light 테마에 대해 별도의 값을 정의할 수 있습니다. 테마 지원은 임포트(import)를 통해서도 나타나는데, dark 테마 파일을 기본 토큰 파일로 임포트하여 생성된 출력물에 기본값과 테마값이 모두 포함되도록 할 수 있습니다. 이 도구는 zero-conf를 지향합니다. YAML 또는 JSON으로 작성된 간단한 토큰 파일만으로 시작할 수 있습니다. 또한 필요한 경우 사용자 정의가 가능하여, 사용자는 요구 사항에 맞게 출력 파일의 형식을 작성하거나 수정할 수 있습니다. 추가적으로 빌드 시스템에서 호출할 수 있는 API 형태로도 제공됩니다. Chromatic은 멀티 플랫폼을 지원합니다. 단일 토큰 파일로부터 웹용 Sass 및 CSS, iOS용 JSON 및 plist 형식, Android용 XML 등 플랫폼별 결과물을 생성할 수 있습니다. 또한 HTML 파일 형태의 스타일 가이드도 생성 가능합니다. README의 시작 가이드에는 npm install -g @arnog/chromatic를 통한 패키지 글로벌 설치, chromatic example ./test를 통한 예제 디렉토리 생성, 그리고 chromatic ./test -o tokens.scss 또는 chromatic ./test -o tokens.html 실행 방법이 포함되어 있습니다. 사용자는 직접 토큰 파일을 작성할 수도 있습니다. background 및 body-color 값이 포함된 tokens.yaml 파일은 chromatic tokens.yaml -o tokens.scss를 통해 기본 플래그가 지정된 Sass 변수로 변환될 수 있습니다. dark 테마 파일은 theme: dark와 background, body-color 같은 토큰을 설정한 후 메인 토큰 파일로 임포트될 수 있습니다. 생성된 CSS 출력에는 루트 수준의 사용자 정의 속성과 data-theme='dark' 사용자 정의 속성을 가진 dark 테마 선택자가 포함됩니다.