Skip to content

Add @pierre/theme-kit: shared theming package#777

Open
necolas wants to merge 4 commits into
nicolas/ci-fixesfrom
nicolas/theme-kit
Open

Add @pierre/theme-kit: shared theming package#777
necolas wants to merge 4 commits into
nicolas/ci-fixesfrom
nicolas/theme-kit

Conversation

@necolas
Copy link
Copy Markdown
Contributor

@necolas necolas commented Jun 4, 2026

Summary

Introduces @pierre/theme-kit, a framework-agnostic package derived from diffs. It becomes the single source of truth for theming: the theme-name catalog, theme resolution + caching, the color math that derives neutral UI tokens, and a stateful controller for the selected mode/theme. @pierre/diffs, @pierre/trees, and the docs app are rewired to draw their colors from it, so a given theme resolves to the same surfaces everywhere.

Why

Theming logic was duplicated and drifting across diffs, trees, and the docs app — each carried its own copy of the catalog, color derivation, and resolution/caching. This consolidates it behind one dependency-light API with a single place to evolve the color math. The package splits into opt-in entry points (/resolve, /controller, /react, /pierre, /shiki) so consumers only bundle what they call, and a build-time guard keeps the core dependency-free.

Integrations

  • diffs — resolveTheme/resolveThemes and the resolved-theme cache sit on top of the shared resolver; getHighlighterThemeStyles runs fg/bg through buildThemeTokens.
  • trees — themeToTreeStyles becomes a thin wrapper over buildThemeTokens, with a build guard keeping the dist free of heavy theming deps.
  • docs — ThemeProvider wraps a single controller instance (resolvedTheme + pluggable persistence, replacing usePersistedState); diffshub selection and tree styles use the shared resolver and buildChromeTokens.

Parity

This is a refactor, not a visual change — the builders emit byte-identical output to the pre-theme-kit code. New unit coverage lands for the resolver, controller, color math, loaders, and the core-clean build invariant.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pierre-docs-diffs Ready Ready Preview Jun 4, 2026 11:26pm
pierre-docs-diffshub Ready Ready Preview Jun 4, 2026 11:26pm
pierre-docs-trees Ready Ready Preview Jun 4, 2026 11:26pm
pierrejs-diff-demo Ready Ready Preview Jun 4, 2026 11:26pm

Request Review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c8ab317ecc

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread apps/docs/package.json
necolas added 4 commits June 4, 2026 16:24
Introduce a framework-agnostic theming package that owns the color and
contrast primitives, theme/chrome token derivation, and theme resolution
previously scattered across diffs, trees, and the docs app.

- color/contrast primitives and surface reconciliation (modules/color,
  resolveSurfaces, types)
- buildThemeTokens and buildChromeTokens for shared surface + chrome derivation
- createThemeResolver: a generic, cache-backed theme resolver
- a controller with resolvedTheme + pluggable persistence, plus React bindings
- entry points: root, /controller, /resolve, /shiki, /pierre, /react
- catalog metadata and theme definitions, with themes.ts moved here from the
  docs diffshub components so every consumer shares one canonical catalog
- tsdown build config, dist guards (assert-core-clean), and test coverage
- wire the package into the root tsconfig references and the lockfile
Delegate diffs' theme resolution to @pierre/theme-kit's createThemeResolver and
run the resolved foreground/background through buildThemeTokens, so diffs,
trees, and the docs app share one canonical token derivation.

- resolveTheme/resolveThemes and the resolved-theme cache now sit on top of the
  shared resolver (themeResolution, themeResolverState)
- getHighlighterThemeStyles fg/bg flow through buildThemeTokens, keeping the
  emitted style string byte-identical to the pre-theme-kit output
- ThemeName picks up the theme-kit catalog literals
- adds resolveTheme and getHighlighterThemeStyles regression tests
themeToTreeStyles is now a thin wrapper over @pierre/theme-kit's
buildThemeTokens, drawing tree styles from the same surface derivation diffs
and the docs app use. Adds an assert-no-theming-deps build guard so the trees
dist stays free of heavy theming dependencies.
Back the docs ThemeProvider with the shared theme-kit controller and resolve
chrome/tree styles through the package rather than reaching into @pierre/diffs.

- theme-provider and themeController wrap a single theme-kit controller instance
  (resolvedTheme + pluggable persistence), replacing usePersistedState
- diffshub theme-name selection and useResolvedTreeThemeStyles use the shared
  resolver and buildChromeTokens
- the ShikiThemes and trees demos consume the shared catalog getters
- chrome golden tests assert byte-for-byte parity with the pre-theme-kit output
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