docs(readme): add an output formats section - #67
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: 7d85450 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Hebilicious
force-pushed
the
docs/output-formats
branch
from
September 24, 2026 10:20
b7113c4 to
5d346c7
Compare
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
cssforge | 7d85450 | Commit Preview URL Branch Preview URL |
Sep 24 2026, 12:41 PM |
The README described the generated CSS in detail and mentioned the TypeScript output in one Quick Start step, so it was easy to read CSS Forge as a CSS-only tool. It now has an Output Formats section that covers every generated artifact. The section lists the CSS, TypeScript, JSON, and Style Dictionary outputs with their mode, flag, and default path, documents the key / value / variable shape of a token, and shows importing a token value as a color string in TypeScript or reading the same tree from JSON. It also records which tokens carry final values and which keep var(--token), which decides whether a consumer outside the browser can use them. The docs site gains the matching guide/output-formats page, wired into the sidebar, the sync task outputs, and the agent routing index.
Hebilicious
force-pushed
the
docs/output-formats
branch
from
September 24, 2026 12:40
5d346c7 to
7d85450
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The README explained the generated CSS in detail and mentioned the TypeScript output in a single Quick Start step, so it was easy to read CSS Forge as a CSS-only tool. This adds an
## Output Formatssection between Quick Start and Configuration that covers every generated artifact.It documents:
key/value/variableshape of a generated token, and why numeric and@keys are read as strings.var(--token)(theme, gradient, primitive), which decides whether a consumer outside the browser can use a value.Docs site
The docs sync script now emits
guide/output-formats.mdfrom the same section. The page is wired into the VitePress sidebar, thedocs:sync-docsdeclared outputs, and the agent routing index.packages/cssforge/README.mdis the generated mirror, updated bycssforge:readme-update.Verification
Every snippet was run against the real generator, and the TypeScript example was type-checked with the documented compiler options and executed:
cardresolved to{"backgroundColor":"oklch(73.511% 0.16799 40.24666)","padding":"0.5rem","fontSize":"clamp(0.875rem, 0.8391rem + 0.1794vw, 1rem)"}.cssForge.theme.light.background.primary.valueis"var(--palette-coral-100)", andcssForge.palette.coral["100"].valueis the final OKLCH string, matching the section's table.cssforge:readme-checkpasses;vitest runpasses 87 tests; the VitePress build renders the new page.tests/version-artifact.test.tscannot run in the sandbox this was prepared in because it shells out topnpm install, which needs write access to the pnpm store.Changeset
.changeset/output-formats-section.mdmarks a patch for@hebilicious/cssforge, since the README ships in the published package.