Skip to content

feat: extract ShellDocs.Tokens - shared CSS variable layer - #5

Merged
Shewart merged 8 commits into
mainfrom
feat/design-tokens
Jul 16, 2026
Merged

feat: extract ShellDocs.Tokens - shared CSS variable layer#5
Shewart merged 8 commits into
mainfrom
feat/design-tokens

Conversation

@Shewart

@Shewart Shewart commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Summary

Extracts :root + :root.dark CSS variables out of ShellDocs.Components into 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.Tokens

  • src/ShellDocs.Tokens/ShellDocs.Tokens.csproj — Razor Class Library, IsPackable=true
  • wwwroot/tokens.css — the single asset it ships: :root (light) + :root.dark blocks defining every stable ShellDocs variable (palette, semantics, radius, sidebar/toc/header dimensions, font stacks). Inter font @import moved here too.

Downstream wiring

  • ShellDocs.Components.csproj now ProjectReferences ShellDocs.Tokens — tokens travel transitively when someone installs Components.
  • ShellDocs.Components/wwwroot/shelldocs-theme.css trimmed: token blocks removed, only base HTML resets + .shelldocs-prose typography + code-block chrome + Prism overrides remain. New header comment explains the split.
  • examples/ShellDocs.Preview/Components/App.razor — links tokens.css before shelldocs-theme.css so tokens resolve first.
  • shelldocs.slnx includes the new project. Legacy shelldocs.sln deleted (we standardised on .slnx earlier).

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 :root and :root.dark blocks, 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.Preview and src/ShellDocs.Components/Layouts/HomeLayout.razor — no framework contract impact.

  • Video hero — copied the ShellUI-docs bordered-frame hero: 70vh rounded card, looping .webm background (light + dark variants swap via the .dark class), gradient text-readability overlay, pill CTAs. Videos live at examples/ShellDocs.Preview/wwwroot/hero-bg-{light,dark}.webm (~2MB combined, verbatim from shellui-docs-fuma).
  • Hero copy rewrite — dropped the AI-flavoured "Markdown-first, Razor-native, Cmd+K-searchable" adjective-list for grounded copy that names actual peers: "MudBlazor, Radzen, Avalonia — every .NET UI library ends up building the same sidebar, search, and code-block. Now they don't have to."
  • Removed 0.1.0-alpha release badge from the hero — it was placeholder marketing chrome, cleaner without it.
  • Footer — ported the ShellUI-docs 3-column footer into HomeLayout (brand + version chip + GitHub/X socials; Resources; Support). Wires to ShellDocsOptions (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.
  • Eyebrow tags on the section headings (Why ShellDocs, Zero-config, Get started, Primitives, Blog, Showcase) now render in sentence case instead of TEXT-TRANSFORM: UPPERCASE. Softer, less shouty, reads as intentional.

Notes

  • Deliberately kept as one tokens.css rather than splitting into tokens-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.
  • The ShellUI-NuGet interop opt-in (AddShellUI(o => o.UseSharedTokens())) that suppresses duplicate :root emission is scoped to feat/shellui-nuget-interop in Phase 3. Not blocking for now — Tailwind users get shared tokens today with zero glue.
  • No behaviour change to the running site from the token split. Same palette, same dark-mode toggle, same everything - verified visually.

@Shewart
Shewart merged commit 49c209c into main Jul 16, 2026
1 check passed
@Shewart
Shewart deleted the feat/design-tokens branch July 17, 2026 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant