Refactor theme provider with scoped Panda tokens

[nathan2slime]

Summary

• split theme logic into dedicated modules (theme-context, theme-definitions, theme-helpers, use-system-theme, and use-ui-theme) to keep provider responsibilities focused
• add derived semantic action tokens and data-color-mode scoping so Panda semantic colors resolve correctly for themed subtrees
• expand Storybook and theme test coverage to validate token derivation, system theme updates, and hook/provider behavior

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	Mar 18, 2026 0:19am

[Copilot]

Pull request overview

Refactors the UI theme system into focused modules, adds derived semantic “action” tokens plus data-color-mode scoping for Panda token resolution, and expands automated coverage around theme resolution behavior (including system preference changes).

Changes:

• Split theme concerns into theme-context, theme-definitions, theme-helpers, use-system-theme, and use-ui-theme, simplifying UiThemeProvider.
• Add derived semantic action tokens and apply data-color-mode on provider scope so Panda semantic colors resolve correctly within themed subtrees.
• Add/expand unit tests for helpers, hooks, and provider behavior; add commit tooling (commitlint + lefthook) and Storybook CSS/alias updates.

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/theme/use-ui-theme.ts	Adds dedicated hook for consuming the theme context with provider guard.
src/theme/use-system-theme.ts	Adds dedicated hook to track OS color scheme changes via matchMedia.
src/theme/ui-theme-provider.tsx	Simplifies provider, derives tokens, and adds data-color-mode scoping attribute.
src/theme/theme-helpers.ts	Extracts helper functions for resolving themes, generating CSS vars, and deriving semantic action tokens.
src/theme/theme-definitions.ts	Moves built-in light/dark token definitions into a dedicated module.
src/theme/theme-context.ts	Centralizes the theme React context creation.
src/theme/tests/use-ui-theme.test.tsx	Adds coverage for hook behavior (throws outside provider, returns nearest context).
src/theme/tests/use-system-theme.test.tsx	Adds coverage for system theme tracking and listener cleanup.
src/theme/tests/ui-theme-provider.test.tsx	Adds coverage for scoping attributes, token merging, and system theme updates.
src/theme/tests/theme-helpers.test.ts	Adds coverage for helper functions (resolution, CSS var mapping, derived token outputs).
src/theme/index.ts	Updates exports to reflect new module split (useUiTheme moved out of provider file).
package.json	Adds commitlint script and dev dependencies for commit hooks.
pnpm-lock.yaml	Locks new dev dependencies (commitlint + lefthook and transitive deps).
lefthook.yml	Adds commit-msg and pre-commit hooks (commitlint, lint, test).
biome.json	Adjusts Biome linter configuration (disables noUselessLoneBlockStatements).
AGENTS.md	Documents Conventional Commits requirement and adds tooling notes.
.storybook/styles/reset.css	Adds Storybook-only CSS reset layer.
.storybook/styles/index.css	Imports reset and sets Storybook font-family baseline.
.storybook/main.ts	Adds rsbuild alias configuration for @ and styled-system in Storybook.
.commitlintrc	Adds commitlint conventional config.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.