Skip to content

Add @pui/theme-radix package with Radix token pipeline and component ports#60

Draft
developit wants to merge 8 commits intomainfrom
codex/implement-radix-themes-for-pui
Draft

Add @pui/theme-radix package with Radix token pipeline and component ports#60
developit wants to merge 8 commits intomainfrom
codex/implement-radix-themes-for-pui

Conversation

@developit
Copy link
Copy Markdown
Owner

Motivation

  • Provide a drop-in Radix-themed token source that converts Radix tokens into PUI --p-* HSL triplet variables so PUI can consume Radix themes at build time.
  • Vendor the minimal Radix token/component CSS to ensure deterministic local generation and enable dark/light + accent scopes without remote dependencies.
  • Port a small set of Radix surface components (button, input, textarea, dialog) to PUI attribute selectors to unlock visual parity for core controls.

Description

  • Add a new package packages/pui-theme-radix with package.json, postcss.config.cjs, and npm scripts build:tokens, build:css, and build to run the token generator and PostCSS build.
  • Implement a token pipeline: src/build/gen-tokens.mjs (PostCSS bundle -> virtual CSS var resolver -> composite alpha over background -> HSL triplet converter) and an editable src/build/token-map.json that maps Radix variables to PUI --p-* outputs.
  • Vendor Radix sources under src/radix-src/ (tokens, colors, components and _internal pieces) and add a src/build/css/radix-entry.css entry used by the generator.
  • Produce src/generated/tokens.css from the generator and stitch the theme in src/index.css, and add PUI-ported component styles in src/components/ for button, input, textarea, and dialog following the selector/variant mapping rules.
  • Small runtime/tooling fixes: added white/black parsing to the generator's parseColor to handle CSS keywords; updated workspace (pnpm-workspace.yaml) and lockfile to include the new package and PostCSS dev deps.

Testing

  • pnpm install was executed for the workspace and completed successfully, installing the new PostCSS/tooling dev dependencies for the theme package.
  • Executed the token generator with node packages/pui-theme-radix/src/build/gen-tokens.mjs; the first run exposed a color parsing edge-case (CSS keywords) and after a small parsing fix the generator re-ran successfully and emitted packages/pui-theme-radix/src/generated/tokens.css.
  • postcss build (pnpm --filter @pui/theme-radix run build:css) was not executed in this rollout; the package contains the PostCSS wiring and postcss devDependencies to run that step in CI or locally.

Codex Task

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 8, 2026

Deploy Preview for pui-demo ready!

Name Link
🔨 Latest commit 95ea1d3
🔍 Latest deploy log https://app.netlify.com/projects/pui-demo/deploys/698948634f06b40008696684
😎 Deploy Preview https://deploy-preview-60--pui-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 8, 2026

Size Change: 0 B

Total Size: 10.6 kB

ℹ️ View Unchanged
Filename Size
dist/index.css 5.7 kB
dist/index.js 4.95 kB

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant