{"id":13775067,"url":"https://github.com/ui-js/chromatic","last_synced_at":"2025-08-16T22:34:07.037Z","repository":{"id":36459960,"uuid":"224255033","full_name":"ui-js/chromatic","owner":"ui-js","description":"A build system for managing cross-platform design systems using design tokens.","archived":false,"fork":false,"pushed_at":"2023-02-11T10:10:07.000Z","size":1993,"stargazers_count":60,"open_issues_count":4,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-08T13:50:59.541Z","etag":null,"topics":["design-systems","design-tokens"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-11-26T18:02:19.000Z","updated_at":"2024-07-04T10:24:52.000Z","dependencies_parsed_at":"2023-02-18T03:45:47.534Z","dependency_job_id":null,"html_url":"https://github.com/ui-js/chromatic","commit_stats":null,"previous_names":["arnog/chromatic"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ui-js/chromatic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-js%2Fchromatic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-js%2Fchromatic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-js%2Fchromatic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-js%2Fchromatic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-js","download_url":"https://codeload.github.com/ui-js/chromatic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-js%2Fchromatic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270781200,"owners_count":24643805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","design-tokens"],"created_at":"2024-08-03T17:01:33.459Z","updated_at":"2025-08-16T22:34:07.013Z","avatar_url":"https://github.com/ui-js.png","language":"TypeScript","readme":"# Chromatic\n\nA tool to help manage design systems by generating platform-specific files from\na source file describing design tokens.\n\n### Expressive Design Tokens\n\nTokens can contain rich expressions in a natural syntax, including arithmetic\noperations, units (`12px`), function (`rgb()`, `mix()`, `saturate()`...) and\nreferences to other tokens.\n\n```yaml\ntokens:\n  primary-hue: '210deg'\n  primary: 'hsl({primary-hue}, 100%, 40%)'\n  primary-dark: 'darken({primary}, 20%)'\n\n  line-height: '18pt + 5px'\n```\n\n### Themes\n\nEach token can have a theme variant, such as dark/light, or compact/cozy\nlayouts. The necessary output artifacts are generated automatically.\n\n```yaml\ntokens:\n  cta-button-background:\n    value:\n      dark: '#004082'\n      light: '#0066ce'\n```\n\n### Zero-conf\n\nGet going quickly. A simple **token file** written YAML or JSON file is all you\nneed.\n\nBut Chromatic is also customizable when you need to. You can write or modify the\nformat of the output files to suit your needs.\n\nChromatic is also available as an API that can be invoked from a build system.\n\n### Multi-platform\n\nFrom a single token file, generate platform specific artifacts:\n\n- for the web (Sass, CSS)\n- for iOS (JSON, plist)\n- for Android (XML)\n\nChromatic can also generate a style guide as a HTML file.\n\n## Getting started with Chromatic\n\n```shell\n$ npm install -g @arnog/chromatic\n```\n\nTo create a directory with an example:\n\n```shell\n$ chromatic example ./test\n$ chromatic ./test -o tokens.scss\n$ chromatic ./test -o tokens.html\n```\n\nOr writing your own token file:\n\n```yaml\n# tokens.yaml\ntokens:\n  background: '#f1f1f1'\n  body-color: '#333'\n```\n\n```shell\n$ chromatic tokens.yaml -o tokens.scss\n```\n\n```scss\n$background: #f1f1f1 !default;\n$body-color: #333 !default;\n```\n\nNow, let's create a dark theme:\n\n```yaml\n# tokens-dark.yaml\ntheme: dark\ntokens:\n  background: '#222'\n  body-color: '#a0a0a0'\n```\n\n```yaml\n# tokens.yaml\nimport: ./tokens-dark.yaml\ntokens:\n  background: '#f1f1f1'\n  body-color: '#333'\n```\n\n```shell\n$ chromatic tokens.yaml -o tokens.scss\n```\n\n```css\n:root {\n  --background: #f1f1f1;\n  --body-color: #333;\n}\nbody[data-theme='dark'] {\n  --background: #222;\n  --body-color: #a0a0a0;\n}\n```\n","funding_links":[],"categories":["Tools"],"sub_categories":["Collections"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-js%2Fchromatic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-js%2Fchromatic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-js%2Fchromatic/lists"}