feat: extract ShellDocs.Tokens - shared CSS variable layer - #5
Merged
Conversation
…add TOKENS.md documentation for ShellDocs design tokens
…s, enabling consistent theming across ShellDocs and Blazor UI libraries
…grounds for improved user experience
…port in ShellDocs preview app
…urces, and support links for improved user engagement
…nt for ShellDocs.Tokens project
…Toggle components
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
Extracts
:root+:root.darkCSS variables out ofShellDocs.Componentsinto a new dedicated package,ShellDocs.Tokens. Consumers can now depend on tokens without pulling the whole components RCL — which is what ShellUI (Tailwind install) and any third-party Blazor UI library will do to share the visual system with a ShellDocs site.Pure plumbing on the framework side; a handful of Home-page polish changes ride along.
Framework — the actual token split
New package:
ShellDocs.Tokenssrc/ShellDocs.Tokens/ShellDocs.Tokens.csproj— Razor Class Library, IsPackable=truewwwroot/tokens.css— the single asset it ships::root(light) +:root.darkblocks defining every stable ShellDocs variable (palette, semantics, radius, sidebar/toc/header dimensions, font stacks). Inter font@importmoved here too.Downstream wiring
ShellDocs.Components.csprojnowProjectReferencesShellDocs.Tokens— tokens travel transitively when someone installs Components.ShellDocs.Components/wwwroot/shelldocs-theme.csstrimmed: token blocks removed, only base HTML resets +.shelldocs-prosetypography + code-block chrome + Prism overrides remain. New header comment explains the split.examples/ShellDocs.Preview/Components/App.razor— linkstokens.cssbeforeshelldocs-theme.cssso tokens resolve first.shelldocs.slnxincludes the new project. Legacyshelldocs.slndeleted (we standardised on.slnxearlier).Documentation
docs/TOKENS.md— the contract doc: every stable token with its purpose, how to override in your own stylesheet, stability rules (names stable across majors, values may shift), and the three consumer integration paths (ShellDocs.Components, ShellUI Tailwind, standalone).Tests
tests/ShellDocs.Tests/DesignTokensTests.cs— 5 tests. Asserts tokens.css exists in the built output, is non-trivially sized, defines 15 known-stable tokens (--background,--foreground,--primary,--muted,--accent,--border,--radius,--sidebar-width,--header-height,--font-sans,--font-mono,--info,--warning,--error,--success), has both:rootand:root.darkblocks, and that the dark block re-declares core surface variables (so the class toggle actually flips them). Full suite: 71 passing (was 66).Home page polish (bundled)
Small marketing-page changes made while iterating on the Preview app. All in
examples/ShellDocs.Previewandsrc/ShellDocs.Components/Layouts/HomeLayout.razor— no framework contract impact..webmbackground (light + dark variants swap via the.darkclass), gradient text-readability overlay, pill CTAs. Videos live atexamples/ShellDocs.Preview/wwwroot/hero-bg-{light,dark}.webm(~2MB combined, verbatim fromshellui-docs-fuma).0.1.0-alpharelease badge from the hero — it was placeholder marketing chrome, cleaner without it.HomeLayout(brand + version chip + GitHub/X socials; Resources; Support). Wires toShellDocsOptions(SiteName,SiteTagline,GitHubRepo) so downstream consumers get the same layout with their own values. Version chip is a temporary hardcoded string — will move to an assembly-version binding in a later branch.Why ShellDocs,Zero-config,Get started,Primitives,Blog,Showcase) now render in sentence case instead ofTEXT-TRANSFORM: UPPERCASE. Softer, less shouty, reads as intentional.Notes
tokens.cssrather than splitting intotokens-base.css/tokens-full.css— premature optimisation until we actually have consumers who want only a subset. Easy to split later without breaking the current file.AddShellUI(o => o.UseSharedTokens())) that suppresses duplicate:rootemission is scoped tofeat/shellui-nuget-interopin Phase 3. Not blocking for now — Tailwind users get shared tokens today with zero glue.