Repository navigation
docs: modernize homepage code examples below the hero - #313
Merged
Merged
Conversation
Audit and refresh the stale example blocks on the docs homepage so the
landing page teaches the current styleframe idioms:
- Compose section: drop the unused colorPrimary/colorSecondary
destructure; call useColorDesignTokens for its side effect and align
the sibling composables on the use*DesignTokens naming.
- Themes section: replace the stale "merge two theme instances" pattern
and hyphenated color-primary tokens with the canonical single-source
theme('dark', ctx => ...) config and dot-notation tokens.
- Zero-runtime section: update the recipe to the current single named-
object signature recipe({ name, base, variants, defaultVariants }) and
fix the CSS var to the real --color--primary output.
Scanner utility-class block was already current and left unchanged.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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
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.
Summary
The docs homepage promised "current styleframe" but three of the four example blocks below the hero taught stale idioms. This audits every block and refreshes the ones that had drifted, grounding each against the live API and the canonical API docs. The hero example was already correct and is untouched.
What changed, block by block
1. "Compose your system from existing parts"
The block declared
const { colorPrimary, colorSecondary } = useColorDesignTokens(...)and then never used those names — an unused-variable smell that makes a reader distrust the example.useColorDesignTokensregisters its tokens as a side effect, so the call is now made directly, and the sibling composables are aligned on the realuse*DesignTokensnaming convention.2. "One source, every theme"
Replaced the stale pattern of
merge()-ing two separatestyleframe()instances (one "light", one "dark") plus hyphenatedvariable('color-primary', ...)tokens. Merging two instances to build a theme is not how theming works today and teaches the wrong mental model. The block now shows the canonical single-source pattern from/docs/api/themes— base tokens on one instance withtheme('dark', (ctx) => ctx.variable(...))— and dot-notation token names (color.surface), which are what actually compile to--color--surface.3. "Zero-Runtime by Default"
The recipe used the old positional signature
recipe('button', {...}, {...}). The current API is a single named-object argument:recipe({ name, base, variants, defaultVariants })(verified inengine/core/src/tokens/recipe.tsand mirrored in/docs/api/recipes). Also corrected the CSS var in the sibling output block from--color-primaryto the real--color--primarythat dot-notation tokens generate.4. Utility Scanner markup
Already current (
_padding:lg,_hover:background:secondary,_gap:[1rem]all match today's utility/modifier syntax) — left unchanged.Verification
pnpm install --frozen-lockfile(fresh workspace) — okpnpm --filter @styleframe/docs build— build complete, homepage content parses and renders (only a benignsharpdarwin-arm64 image warning, unrelated)::tabs, all::browser-frameblocks balancedNotes / findings
docs-craftrecommendspnpm --filter @styleframe/docs typecheck, but@styleframe/docshas notypecheckscript — the build is the real gate here. Flagging the skill inaccuracy for follow-up.@styleframe/docsis in the changesets ignore list.Closes SF-30.