{"id":30895722,"url":"https://github.com/hebilicious/cssforge","last_synced_at":"2025-09-08T22:47:05.538Z","repository":{"id":313677894,"uuid":"1052252810","full_name":"Hebilicious/cssforge","owner":"Hebilicious","description":"Generate CSS variables from design tokens.","archived":false,"fork":false,"pushed_at":"2025-09-07T19:14:48.000Z","size":48,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-07T20:22:23.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jsr.io/@hebilicious/cssforge","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/Hebilicious.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Hebilicious"]}},"created_at":"2025-09-07T18:00:28.000Z","updated_at":"2025-09-07T19:32:45.000Z","dependencies_parsed_at":"2025-09-07T20:22:26.301Z","dependency_job_id":"82317d12-0593-4445-891f-b56098638969","html_url":"https://github.com/Hebilicious/cssforge","commit_stats":null,"previous_names":["hebilicious/cssforge"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Hebilicious/cssforge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fcssforge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fcssforge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fcssforge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fcssforge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hebilicious","download_url":"https://codeload.github.com/Hebilicious/cssforge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fcssforge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274231228,"owners_count":25245659,"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-08T02:00:09.813Z","response_time":121,"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-09-08T22:47:00.759Z","updated_at":"2025-09-08T22:47:05.520Z","avatar_url":"https://github.com/Hebilicious.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Hebilicious"],"categories":[],"sub_categories":[],"readme":"# CSS Forge\n\n0 runtime design tokens generator for modern style systems.\n\n## Why\n\nCSS forge is a suite of tools that leverages modern CSS features and conventions to help\nyou generate design tokens. All operations happen at build time, so you can use the\ngenerated tokens in your stylesheets without any runtime overhead. Cssforge accepts a\nsingle, serializable configuration object.\n\n## Features\n\n- 🎨 **Colors**: Create palettes, gradients and themes. Automatically convert to OKLCH.\n- 📐 **Type Scale**: Generate fluid typography with `clamp()`\n- 📏 **Spacing Scale**: Organise spacing utilities\n- 📦 **Primitives**: Define custom design tokens\n- 🔄 **Watch Mode**: Auto-regenerate when your config changes\n- 🎯 **Zero Runtime**: All processing happens at build time\n- 🔌 **Framework Agnostic**: Use with any CSS workflow\n\n## Installation\n\nFor programmatic usage, you can install CSS Forge as a dependency:\n\n```bash\n# Using npm\nnpx jsr add @hebilicious/cssforge\n\n# Using Deno\ndeno install jsr:@hebilicious/cssforge\n```\n\nFor CLI usage, you can also run CSS Forge directly from JSR or install it globally:\n\n```bash\n# Run directly from jsr with npx\nnpx jsr run @hebilicious/cssforge/cli\n\n# Run directly from jsr with deno\ndeno run -A jsr:@hebilicious/cssforge/cli \n\n# Or install globally\ndeno install -A -n cssforge jsr:@hebilicious/cssforge/cli\n```\n\n## Quick Start\n\n1. Create a configuration file (`cssforge.config.ts`):\n\n```typescript\nimport { defineConfig } from \"jsr:@hebilicious/cssforge\";\n\nexport default defineConfig({\n  spacing: {\n    size: {\n      value: {\n        1: \"0.25rem\",\n        2: \"0.5rem\",\n        3: \"0.75rem\",\n        4: \"1rem\",\n      },\n    },\n  },\n  typography: {\n    arial: {\n      typescale: {\n        value: {\n          minWidth: 320,\n          minFontSize: 14,\n          minTypeScale: 1.25,\n          maxWidth: 1435,\n          maxFontSize: 16,\n          maxTypeScale: 1.25,\n          positiveSteps: 5,\n          negativeSteps: 3,\n        },\n      },\n    },\n  },\n  colors: {\n    palette: {\n      value: {\n        coral: {\n          100: { hex: \"#FF7F50\" },\n        },\n        mint: {\n          100: { hex: \"#4ADE80\" },\n        },\n        indigo: {\n          100: { hex: \"#4F46E5\" },\n        },\n      },\n    },\n  },\n});\n```\n\n2. Run CSS Forge with the CLI :\n\nIf you're using a package.json, you can add the follwing into your scripts :\n\n```json\n{\n  \"scripts\": {\n    \"cssforge\": \"npx @hebilicious/cssforge/cli\"\n  }\n}\n```\n\nThen run the following command :\n\n```bash\nnpx cssforge --watch\n```\n\nIf you're using a deno.json :\n\n```json\n{\n  \"tasks\": {\n    \"cssforge\": \"deno run -A jsr:@hebilicious/cssforge/cli\"\n  }\n}\n```\n\nThe run the following command :\n\n```bash\ndeno run cssforge --watch\n```\n\n3. Use the generated variables in your CSS:\n\n```css\n@import \"cssforge.output.css\" layer(cssforge);\n\n.button {\n  background-color: var(--color-primary-500);\n  padding: var(--size-2) var(--size-4);\n}\n```\n\n4. Use the generated css in your JS/TS :\n\n```typescript\nimport { generateTS } from \"jsr:@hebilicious/cssforge\";\nimport { cssForge } from \"./.cssforge/output.ts\";\n\n// Use like this anywhere :\n//`cssForge.colors.palette.value.basic.white` is fully typed { key: --myKey, value: white, variable: --key: white }\n\nexport { cssForge };\n```\n\n## Configuration\n\n### Colors\n\nDefine colors in any format - they'll be automatically converted to OKLCH. You can compose\ncolors from the palette into gradients and themes.\n\n```typescript\nexport default defineConfig({\n  colors: {\n    palette: {\n      value: {\n        simple: {\n          white: \"oklch(100% 0 0)\",\n          black: \"#000\",\n          green: { rgb: [0, 255, 0] },\n          blue: { hsl: [240, 100, 50] },\n          violet: { oklch: \"oklch(0.7 0.2 270)\" },\n          red: { hex: \"#FF0000\" },\n        },\n      },\n    },\n    gradients: {\n      value: {\n        \"white-green\": {\n          value: {\n            primary: {\n              value: \"linear-gradient(to right, var(--c1), var(--c2))\",\n              variables: {\n                \"c1\": \"colors.palette.value.simple.white\",\n                \"c2\": \"colors.palette.value.simple.green\",\n              },\n            },\n          },\n        },\n      },\n    },\n    theme: {\n      value: {\n        light: {\n          background: {\n            value: {\n              primary: \"var(--1)\",\n              secondary: \"var(--2)\",\n            },\n            variables: {\n              1: \"colors.palette.value.simple.white\",\n              2: \"colors.gradients.value.white-green\", //Reference the color name directly.\n            },\n          },\n        },\n      },\n    },\n  },\n});\n```\n\nThis will generate the following css :\n\n```css\n/*____ CSSForge ____*/\n:root {\n  /*____ Colors ____*/\n  /* Palette */\n  --color-simple-white: oklch(100% 0 0);\n  --color-simple-black: oklch(0% 0 0);\n  --color-simple-green: oklch(86.644% 0.29483 142.49535);\n  --color-simple-blue: oklch(45.201% 0.31321 264.05202);\n  --color-simple-violet: oklch(70% 0.2 270);\n  --color-simple-red: oklch(62.796% 0.25768 29.23388);\n  /*  Gradients  */\n  --gradient-white-green-primary: linear-gradient(\n    to right,\n    var(--color-simple-white),\n    var(--color-simple-green)\n  );\n  /* Theme: light */\n  /* background */\n  --theme-light-background-primary: var(--color-simple-white);\n  --theme-light-background-secondary: var(--gradient-white-green-primary);\n}\n```\n\n### Spacing\n\nDefine custom spacing scale, that can be referenced for other types, such as primitives.\nBy default all spacing values are converted to from `px` to `rem`. This can be disabled\nwith the settings.\n\n```typescript\nexport default defineConfig({\n  spacing: {\n    size: {\n      value: {\n        1: \"0.25rem\",\n        2: \"0.5rem\",\n        3: \"0.75rem\",\n        4: \"16px\",\n      },\n      settings: { pxToRem: true, rem: 16 }, // Optional, default settings\n    },\n  },\n});\n```\n\nThis will generate the following css :\n\n```css\n/*____ CSSForge ____*/\n:root {\n  /*____ Spacing ____*/\n  --size-1: 0.25rem;\n  --size-2: 0.5rem;\n  --size-3: 0.75rem;\n  --size-4: 1rem;\n}\n```\n\n### Typography\n\nDefine your typography, with typescales powered by\n[utopia](https://utopia.fyi/type/calculator):\n\n```typescript\nexport default defineConfig({\n  typography: {\n    arial: {\n      weight: {\n        value: {\n          regular: \"500\",\n        },\n      },\n      typescale: {\n        value: {\n          minWidth: 320,\n          minFontSize: 14,\n          minTypeScale: 1.25,\n          maxWidth: 1435,\n          maxFontSize: 16,\n          maxTypeScale: 1.25,\n          positiveSteps: 5,\n          negativeSteps: 3,\n        },\n      },\n    },\n  },\n});\n```\n\nThis will generate the following css :\n\n```css\n/*____ CSSForge ____*/\n:root {\n  /*____ Typography ____*/\n  --typography-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem);\n  --typography-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem);\n  --typography-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem);\n  --typography-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem);\n  --typography-arial-lg: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem);\n  --typography-arial-base: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem);\n  --typography-arial-sm: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem);\n  --typography-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem);\n  --typography-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem);\n  --weight-arial-regular: 500;\n}\n```\n\n### Customizing Typescales\n\nYou can customize the typescale by providing your prefix and custom labels. The prefix\nwill overwrite the name of the key that you are using to define your typography.\n\n```typescript\nconst config = defineConfig({\n  typography: {\n    comicsans: {\n      typescale: {\n        value: {\n          minWidth: 320,\n          minFontSize: 14,\n          minTypeScale: 1.25,\n          maxWidth: 1435,\n          maxFontSize: 16,\n          maxTypeScale: 1.25,\n          positiveSteps: 2,\n          negativeSteps: 2,\n          prefix: \"text\",\n        },\n        settings: {\n          customLabel: {\n            \"-2\": \"a\",\n            \"-1\": \"b\",\n            \"0\": \"c\",\n            \"1\": \"d\",\n            \"2\": \"e\",\n          },\n        },\n      },\n    },\n  },\n});\n```\n\nWill generate the following css variables :\n\n```css\n/*____ CSSForge ____*/\n:root {\n  /*____ Typography ____*/\n  --typography-text-e: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem);\n  --typography-text-d: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem);\n  --typography-text-c: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem);\n  --typography-text-b: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem);\n  --typography-text-a: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem);\n}\n```\n\n#### Referencing Typescale\n\nTo reference typescales, use the `@` symbol and the label of the typescale; ie:\n`typography.text.typescale@a`. By default the labels follow the Tailwind convention :\n\n- 2xs\n- xs\n- sm\n- base\n- lg\n- xl\n- 2xl\n\n### Primitives\n\nMore flexible than other types, primitives allow you to define any type of token by\ncomposing the base types.\n\n```typescript\nexport default defineConfig({\n  typography: {\n    arial: {\n      typescale: {\n        value: {\n          minWidth: 320,\n          minFontSize: 14,\n          minTypeScale: 1.25,\n          maxWidth: 1435,\n          maxFontSize: 16,\n          maxTypeScale: 1.25,\n          positiveSteps: 5,\n          negativeSteps: 3,\n        },\n      },\n    },\n  },\n  spacing: {\n    size: {\n      value: {\n        2: \"0.5rem\",\n        3: \"0.75rem\",\n      },\n    },\n  },\n  primitives: {\n    button: {\n      value: {\n        small: {\n          value: {\n            width: \"120px\",\n            height: \"40px\",\n            fontSize: \"var(--base)\",\n            radius: \"8px\",\n            padding: \"var(--2) var(--3)\",\n          },\n          variables: {\n            \"base\": \"typography.arial.typescale@base\",\n            \"2\": \"spacing.size.value.2\",\n            \"3\": \"spacing.size.value.3\",\n          },\n        },\n      },\n    },\n  },\n});\n```\n\nThis will generate the following css :\n\n```css\n/*____ CSSForge ____*/\n:root {\n  /*____ Spacing ____*/\n  --size-2: 0.5rem;\n  --size-3: 0.75rem;\n  /*____ Typography ____*/\n  --typography-arial-4xl: clamp(2.6703rem, 2.5608rem + 0.5474vw, 3.0518rem);\n  --typography-arial-3xl: clamp(2.1362rem, 2.0486rem + 0.4379vw, 2.4414rem);\n  --typography-arial-2xl: clamp(1.709rem, 1.6389rem + 0.3503vw, 1.9531rem);\n  --typography-arial-xl: clamp(1.3672rem, 1.3111rem + 0.2803vw, 1.5625rem);\n  --typography-arial-lg: clamp(1.0938rem, 1.0489rem + 0.2242vw, 1.25rem);\n  --typography-arial-base: clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem);\n  --typography-arial-sm: clamp(0.7rem, 0.6713rem + 0.1435vw, 0.8rem);\n  --typography-arial-xs: clamp(0.56rem, 0.537rem + 0.1148vw, 0.64rem);\n  --typography-arial-2xs: clamp(0.448rem, 0.4296rem + 0.0918vw, 0.512rem);\n  /*____ Primitives ____*/\n  /* button */\n  --button-small-width: 7.5rem;\n  --button-small-height: 2.5rem;\n  --button-small-fontSize: var(--typography-arial-base);\n  --button-small-radius: 0.5rem;\n  --button-small-padding: var(--size-2) var(--size-3);\n}\n```\n\n## CLI Usage\n\n```bash\n# Basic usage\ncssforge\n\n# Watch mode\ncssforge --watch\n\n# Custom paths and output \ncssforge --config ./foo/bar/custom-path.ts --css ./dist/design-tokens.css --ts ./dist/design-tokens.ts --json ./dist/design-tokens.json --mode all\n```\n\n## Programmatic Usage\n\nYou can also use CSS Forge programmatically:\n\n```typescript\nimport { generateCSS } from \"jsr:@hebilicious/cssforge\";\n\n// Generate CSS string\nconst css = generateCSS(config);\n```\n\n## Best Practices\n\n- **Version Control**: Commit your generated CSS files\n- **CSS Layers**: Use `@layer` to manage specificity\n\n## Examples\n\nCheck out our examples:\n\n- [Basic Setup](./examples/basic)\n\nTODO Examples : [] Nuxt [] Tailwind [] Vite\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fcssforge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhebilicious%2Fcssforge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fcssforge/lists"}