Skip to content

Add @pui/theme-radix package with Radix token generator and initial component ports#61

Open
developit wants to merge 1 commit intomainfrom
codex/implement-radix-themes-for-pui-r4626b
Open

Add @pui/theme-radix package with Radix token generator and initial component ports#61
developit wants to merge 1 commit intomainfrom
codex/implement-radix-themes-for-pui-r4626b

Conversation

@developit
Copy link
Copy Markdown
Owner

Motivation

  • Provide a drop-in Radix Themes-based theme for PUI by vending Radix token sources and converting them to PUI CSS custom properties.
  • Enable deterministic light/dark token output (HSL triplets) so PUI components can be themed purely with CSS variables.
  • Port a minimal set of Radix-styled components (button, input, dialog) to validate the token pipeline and selector mapping approach.

Description

  • Added a new package @pui/theme-radix with a PostCSS build pipeline and a Node generator src/build/gen-tokens.mjs that bundles vendored Radix token CSS and emits src/generated/tokens.css in PUI HSL triplet form.
  • Included an explicit token mapping file at src/build/token-map.json and a small vendored subset of Radix token sources under src/radix-src/tokens/* plus breakpoints.css.
  • Ported Radix-styled component CSS to PUI attribute selectors at src/components/{button.css,input.css,dialog.css} and added src/index.css to stitch generated tokens with the component styles.
  • Added package.json scripts for build:tokens, build:css, and build, and updated workspace config to include the new package.

Testing

  • Installed workspace dependencies with pnpm install which completed successfully.
  • Executed the token generation with pnpm --filter @pui/theme-radix run build:tokens and the generator produced src/generated/tokens.css without errors.
  • Verified the generated token blocks include both :root and .dark outputs and that initial component CSS files import the generated tokens.

Codex Task

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 8, 2026

Deploy Preview for pui-demo ready!

Name Link
🔨 Latest commit 966b1c1
🔍 Latest deploy log https://app.netlify.com/projects/pui-demo/deploys/6988c322b1498800083ad27a
😎 Deploy Preview https://deploy-preview-61--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

@developit developit marked this pull request as ready for review February 15, 2026 22:16
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