{"id":19358601,"url":"https://github.com/paritytech/wip-design-tokens","last_synced_at":"2026-02-23T08:03:43.565Z","repository":{"id":66118716,"uuid":"581217684","full_name":"paritytech/wip-design-tokens","owner":"paritytech","description":"Design Tokens","archived":false,"fork":false,"pushed_at":"2022-12-26T07:48:52.000Z","size":39,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T00:33:09.484Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/paritytech.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}},"created_at":"2022-12-22T15:29:33.000Z","updated_at":"2023-02-28T10:24:00.000Z","dependencies_parsed_at":"2023-02-20T19:45:34.107Z","dependency_job_id":null,"html_url":"https://github.com/paritytech/wip-design-tokens","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/paritytech/wip-design-tokens","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritytech%2Fwip-design-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritytech%2Fwip-design-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritytech%2Fwip-design-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritytech%2Fwip-design-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paritytech","download_url":"https://codeload.github.com/paritytech/wip-design-tokens/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paritytech%2Fwip-design-tokens/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29739766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-11-10T07:12:26.216Z","updated_at":"2026-02-23T08:03:43.529Z","avatar_url":"https://github.com/paritytech.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Design tokens\n\n\nThis example illustrates how you can transform your tokens stored on [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) (with GitHub sync enabled) to be automatically transformed with [token-transformer](https://www.npmjs.com/package/token-transformer) and [Style Dictionary](https://amzn.github.io/style-dictionary/#/).\n\nChange your tokens in [polkadot.json](https://github.com/paritytech/wip-design-tokens/blob/main/src/polkadot/figma-exporter/polkadot.json) (either directly or with the Figma Tokens plugin in Figma).\n\nCSS variables will be generated in the [output directory](https://github.com/paritytech/wip-design-tokens/tree/main/src/polkadot/style-dictionary) which could be used for Tailwind utility classes generation.\n\n## Usage \n\nglobal:\n```\nimport global from \"https://raw.githubusercontent.com/paritytech/wip-design-tokens/main/src/polkadot/style-dictionary/global.json\" assert {\n  type: \"json\",\n};\n```\nlight theme:\n```\nimport light from \"https://raw.githubusercontent.com/paritytech/wip-design-tokens/main/src/polkadot/style-dictionary/light.json\" assert {\n  type: \"json\",\n};\n```\ndark theme:\n```\nimport dark from \"https://raw.githubusercontent.com/paritytech/wip-design-tokens/main/src/polkadot/style-dictionary/dark.json\" assert {\n  type: \"json\",\n};\n```\n\n## Installation \n\n1. install dependencies\n```\nnpm install\n```\n\n2. build tokens\n```\nnpm run build\n```\n\n## Why we need design tokens?\n\n\nDesign tokens are visual design elements that can be standardized and reused across a design system. They are used to help ensure that the design of a product is consistent across different platforms and devices, maintaining a consistent look and feel across different components.\n\n\nDesign tokens include things like colors, typography, spacing, and other design elements that can be easily referenced and implemented consistently throughout a design project.\n\n## Formats\n\nTokens are defined using JSON format and CSS variables, e.g\n```\n  {\n    \"value\": \"#e6007a\",\n    \"type\": \"color\",\n    \"filePath\": \"src/themes/polkadot/tokens/global.json\",\n    \"isSource\": true,\n    \"original\": { \"value\": \"#e6007a\", \"type\": \"color\" },\n    \"name\": \"pink-500\",\n    \"attributes\": { \"category\": \"pink\", \"type\": \"500\" },\n    \"path\": [\"pink\", \"500\"]\n  },\n```\n\n```\n  --pink-500: #e6007a;\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparitytech%2Fwip-design-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparitytech%2Fwip-design-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparitytech%2Fwip-design-tokens/lists"}