{"id":15802086,"url":"https://github.com/jhechtf/design-tokens","last_synced_at":"2026-04-28T20:04:16.717Z","repository":{"id":42581210,"uuid":"464331570","full_name":"jhechtf/design-tokens","owner":"jhechtf","description":"Design token generator written in Deno + TS","archived":false,"fork":false,"pushed_at":"2023-06-15T20:07:49.000Z","size":52,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"mainline","last_synced_at":"2024-10-06T01:41:53.668Z","etag":null,"topics":["deno","design","design-tokens","typescript"],"latest_commit_sha":null,"homepage":"","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/jhechtf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-02-28T03:59:55.000Z","updated_at":"2022-05-10T07:53:49.000Z","dependencies_parsed_at":"2024-10-26T08:00:10.902Z","dependency_job_id":"e8d509aa-2788-4dbf-8dec-b32edc2df17b","html_url":"https://github.com/jhechtf/design-tokens","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"d165ad3479ecdb05b207f827bc8041269cd07bc1"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhechtf%2Fdesign-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhechtf%2Fdesign-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhechtf%2Fdesign-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhechtf%2Fdesign-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhechtf","download_url":"https://codeload.github.com/jhechtf/design-tokens/tar.gz/refs/heads/mainline","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246547387,"owners_count":20794970,"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","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":["deno","design","design-tokens","typescript"],"created_at":"2024-10-05T01:41:55.439Z","updated_at":"2026-04-28T20:04:16.664Z","avatar_url":"https://github.com/jhechtf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Raven (Design Token Generator)\n\nTrying to create design tokens that can be used in CSS, SCSS, and\nJavascript/Typescript?\n\n_Yeah, me too._\n\n## Notes\n\nIn the end I hope that there will be two ways that users can use this library:\n\n1. In code, by importing the relevant items / functions and building it\n   themselves or\n2. By using a CLI tool with a config file (aiming for it to be TS, but\n   considering JSON) to generate it the necessary files in one shot.\n\n## Usage\n\nCurrently the code can be used with the following examples.\n\n```ts\nimport { MediaQuery, Stylesheet, Token } from './mod.ts';\n// Creates a new stylesheet\nconst stylesheet = new Stylesheet();\n// create the tokens.\nconst primaryToken = new Token('primary-color', '#fecc99');\nconst spacingToken = new Token('gap', '4px', 'size');\nconst blueToken = new Token('blue-100', '#11339e');\n// Necessary breakpoints\nconst darkMediaQuery = new MediaQuery('prefers-color-scheme: dark');\nconst mdBreakpointQuery = new MediaQuery('min-width: 370px');\n// Primary token has a dark mode value\nprimaryToken.addMediaQueryValue(darkMediaQuery, blueToken);\n// Spacing token changes on \"medium\" screensize\"\nspacingToken.addMediaQueryValue(mdBreakpointQuery, '8px');\n// Add the tokens to the stylesheet\nstylesheet\n  .addToken(primaryToken)\n  .addToken(spacingToken)\n  .addToken(blueToken);\n// Add the media queries\nstylesheet\n  .addQuery(darkMediaQuery)\n  .addQuery(mdBreakpointQuery);\n// build the stylesheet + JS tokens\nawait stylesheet.buildAndWrite({});\n```\n\nThis will generate two files, `tokens.js` and `tokens.css` which have the\nfollowing values:\n\n**Note**: this values will appear \"flattened\" (not minimized) when they are\noutput. These have been modified to be more readable.\n\n```js\nexport const colorPrimaryColor = 'var(--color-primary-color)';\nexport const sizeGap = 'var(--size-gap)';\nexport const colorBlue100 = 'var(--color-blue-100)';\n```\n\n```css\n:root {\n  --color-primary-color: #fecc99;\n  --size-gap: 4px;\n  --color-blue-100: #11339e;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-primary-color: var(--color-blue-100);\n  }\n}\n@media (min-width: 370px) {\n  :root {\n    --size-gap: 8px;\n  }\n}\n```\n\nThese files can be bundled as part of your design-tokens package and distributed\nout.\n\n## Installation\n\nTo install the cli run the following script:\n\n```\n$ deno install -A https://raw.githubusercontent.com/jhechtf/design-tokens/mainline/src/cli.ts --name raven\n```\n\nI would recommend using scoped down permission for `--allow-read` and\n`--allow-write` if able, but you would also need to add `--allow-env`\n\n### Usage\n\nAfter installing creating a `config.ts` file with the following content\n\n```ts\nimport type {\n  Config,\n} from 'https://raw.githubusercontent.com/jhechtf/design-tokens/mod.ts';\n\nexport default {\n  colors: {\n    primary: 'blue',\n    secondary: 'orange',\n    blue: {\n      100: '#33ff99',\n    },\n  },\n  size: {\n    sm: 4,\n    md: 8,\n    lg: 12,\n    xl: 16,\n  },\n  variants: {\n    'prefers-color-scheme: dark': {\n      colors: {\n        primary: 'lightblue',\n        secondary: 'paleorange',\n      },\n    },\n  },\n} as Config;\n```\n\nThen run\n\n```\nraven --config config.ts\n```\n\n**Notes:** You can export singular instances in the config, such as\n\n```ts\nexport const colors = {\n  primary: 'red',\n  secondary: 'puprple',\n};\n\nexport const sizes = {\n  sm: 4,\n  md: 8,\n  lg: 12,\n};\n\nexport const variants = {\n  'prefers-color-scheme: dark': {\n    primary: 'hsl(0,0, 50%)',\n  },\n};\n```\n\n## FAQ\n\n### Raven?\n\nI like ravens and crows.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhechtf%2Fdesign-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhechtf%2Fdesign-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhechtf%2Fdesign-tokens/lists"}