{"id":27890349,"url":"https://github.com/craftzing/design-system","last_synced_at":"2025-09-20T01:33:37.326Z","repository":{"id":276859956,"uuid":"930245598","full_name":"craftzing/design-system","owner":"craftzing","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-09T12:14:35.000Z","size":1179,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-11T13:36:51.659Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/craftzing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-10T10:16:50.000Z","updated_at":"2025-07-09T11:50:23.000Z","dependencies_parsed_at":"2025-02-10T21:23:00.194Z","dependency_job_id":"c42cabc8-e02e-4034-ab64-73237b8969a0","html_url":"https://github.com/craftzing/design-system","commit_stats":null,"previous_names":["craftzing/design-system"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/craftzing/design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftzing","download_url":"https://codeload.github.com/craftzing/design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2Fdesign-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275225863,"owners_count":25427000,"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-09-15T02:00:09.272Z","response_time":75,"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":[],"created_at":"2025-05-05T10:47:01.879Z","updated_at":"2025-09-20T01:33:37.313Z","avatar_url":"https://github.com/craftzing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DesignSystem\n\nThis repository contains an example setup for a web components-based design system.\n\n## Getting started\n\n1. Clone this repository.\n\n```\ngit clone git@github.com:craftzing/design-system.git\ncd design-system\n```\n\n2. Install dependencies\n\n```\nnpm install\n```\n\n## Usage\n\n### Storybook\n\nStorybook provides an isolated environment to develop and test UI components in a design system. It allows for interactive documentation and testing of components.\n\nStorybook is set up in a separate lib and will render a collection of all components in the monorepo.\n\nStart storybook development environment.\n\n```\nnpm run storybook\n```\n\nBuild your storybook instance.\n\n```\nnpm run build-storybook\n```\n\n### NX\n\n[NX](https://nx.dev/) is a powerful monorepo tool that helps developers manage multiple projects efficiently. It provides a structured, scalable, and optimized workflow for developing and maintaining a design system.\n\nRun the following command to create a new lib.\n\n```\nnpx nx g @nx/js:lib libs/mylib\n```\n\n### Lit\n\nThis library uses [Lit](https://lit.dev/) to build components.\n\n[Lit](https://lit.dev/) is a simple yet powerful library for building fast, lightweight, and reusable web components. It builds upon the Web Components standard and offers an efficient rendering system with minimal boilerplate code.\n\nSee [button](./packages/button/src/lib/button.component.ts) component for a complete example.\n\n## Tokens\n\n### Tools\n\n[Tokens studio](https://tokens.studio) is a design tokens management platform that integrates with Figma and Github. It acts as the source of truth for both designers and developers and provides tools to share the tokens.\n\n[Style dictionary](https://styledictionary.com) is used to transform the source tokens (from Tokens studio) to usable output. In this project, they are transformed to CSS variables.\n\n### Generate tokens\n\nTokens studio syncs the tokens to Github into the following file.\n\n```\nlibs/tokens/tokens-studio/tokens.json\n```\n\nRun the following command to build the design tokens. This will generate the platform specific styles and store them in the dist folder.\n\n```\nnpm run build-tokens\n```\n\nThe design tokens are now available through the workspace.\n\n```\nimport cssTokens from @design-system/tokens/css/tokens.css\n```\n\n\u003e **Note:** Currently the tokens are built through a custom script in the tokens lib. Once nx adds support for ESM in nx plugins, the build script can be adapted to a custom executor. Creating executors standardizes the scripts that are run during development, building and deployment tasks.\n\nESM support issue: https://github.com/nrwl/nx/issues/15682\n\nAn example executor for building the tokens can be found in the `tools/build-tokens` directory. With a custom executor, building the tokens might look like this:\n\n```\nnx run @design-system/tokens:build-tokens\n```\n\n### Testing your tokens\n\nRun the tokens tests\n\n```\nnx run @design-system/tokens:test\n```\n\nUpdate the token snapshots\n\n```\nnx run @design-system/tokens:test -u\n```\n\n## Chromatic\n\n[Chromatic](https://www.chromatic.com/) is a visual testing and review platform for UI components. It enables developers to catch visual regressions early by comparing UI snapshots over time.\n\nCreate a new build.\n\n```\nnpm run chromatic\n```\n\nReview UI changes in the Chromatic [dashboard](https://www.chromatic.com/builds?appId=67d2f3a4c2b97f80915a2be2).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzing%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftzing%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzing%2Fdesign-system/lists"}