Add pui-theme-radix: Radix Themes-based design system for PUI#62
Draft
Add pui-theme-radix: Radix Themes-based design system for PUI#62
Conversation
… ports Implements a complete Radix Themes-based theme for PUI: - Token pipeline: gen-tokens.mjs reads @radix-ui/colors + vendored Radix token CSS, resolves variables for configured accent (blue) / gray (slate), converts to HSL triplets, and emits src/generated/tokens.css - token-map.json: explicit mapping of 27 PUI --p-* tokens to Radix vars - Vendored Radix sources: tokens (all color scales, semantic colors, focus, typography, radius, shadow, spacing) and component CSS (button, text-field, text-area, dialog + _internal bases) - Component ports: button (solid/outline/ghost/soft/surface/destructive/link variants, 4 sizes + aliases, open/disabled/loading states), input (surface/ soft variants, 4 sizes, focus/invalid/disabled), dialog (content + backdrop + popover + dropdown surfaces with Radix shadows and animations) - Build: PostCSS with postcss-import + postcss-nesting, pnpm scripts for build:tokens and build:css - Light + dark mode via :root, @media prefers-color-scheme, and .dark class https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
✅ Deploy Preview for pui-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: 0 B Total Size: 11.3 kB ℹ️ View Unchanged
|
- ThemeToggle component dynamically injects/removes Radix theme CSS as a <link> element, persists choice in localStorage - Toggle button added to nav bar with pill-style styling - Vite alias added for pui-theme-radix package, CSS imported as ?url so it becomes a separate asset loaded on demand https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
Previously only button, input, and dialog were ported, making the theme look nearly identical to PUI's default (just bluer). This adds Radix-style overrides for all remaining components: - Menu items: accent-colored hover highlights (not gray) - Card: borderless with subtle Radix shadow - Tabs: underline indicator instead of pill/shadow - Badge: pill-shaped (full border-radius) - Alert: accent left-border indicator (callout style) - Table: clean borderless with divider lines - Form controls (checkbox, radio, switch, slider, select, textarea): accent-colored active states, outline-based focus - Toggle/toggle-group: ghost-style with accent highlight - Progress: rounded pill with accent fill - Tooltip: dark solid with shadow - Avatar: accent-tinted fallback - Accordion: clean dividers, accent hover - Hover card: Radix surface shadows - Sheet/drawer: refined shadows and border-radius - Navigation/menubar/sidebar: accent-colored hover/active states - Skeleton: pulse animation instead of shimmer - Separator/label: subtle refinements https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
- Slider: revert override — PUI's original already matches Radix - Menus: match Radix base-menu.css size-2 values (8px container padding, 32px item height, 12px item padding, 4px item radius, 8px container radius, shadow-5 with 1px ring). Inset separators inside menus with proper margins. - Tabs: full-width tablist with inset box-shadow bottom border, 2.5rem tab height, hover gray pill effect, accent-colored underline indicator via ::after, flex-start justify https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
Menu padding fix: - Changed from 0.5rem (8px) to 0.25rem (4px) vertical padding - This matches Radix size-2 spacing and fixes "2x too large" issue - Now applies properly to both dropdown-content and context-menu Theme customizer: - Added ThemeCustomizer component to demo nav - Users can paste custom CSS from Radix Themes Playground - CSS is injected via <style> tag and persisted to localStorage - Built entirely with PUI components (Dialog, Button, Label, Textarea) - Includes link to https://www.radix-ui.com/themes/playground - Apply/Clear/Cancel actions with toast notifications https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
PUI's Dialog uses commandfor/command attributes for native dialog control. Replaced open/onOpenChange state management with proper Dialog.Trigger and Dialog.Close wrappers. Switched from controlled textarea state to ref-based access. https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
Rewrites theme-customizer to support: - Visual color swatch grids for all 25 Radix accent colors and 6 gray scales - Button groups for radius (none/small/medium/large/full) and scaling (90-110%) - Paste input that parses Radix Playground <Theme> JSX output - Runtime CSS generation mapping Radix settings to --p-* custom properties - Hex-to-HSL conversion for all color steps - localStorage persistence of theme settings https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
Updates: - Add dark color scales to ACCENT_COLORS and GRAY_COLORS lookup tables - Restructure color data to include both light and dark step values - Update generateCSS to output three CSS blocks: 1. :root with light mode values 2. @media (prefers-color-scheme: dark) for automatic dark mode 3. .dark class for explicit dark mode - Update Swatch components to use light.step9/step11 - This fixes automatic dark mode support when using custom Radix themes https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces
pui-theme-radix, a new theme package that brings Radix Themes design tokens and component styles to PUI. It provides a complete, production-ready theme built on Radix's carefully crafted color system and component patterns.Key Changes
packages/pui-theme-radix/with full build pipelinegen-tokens.mjsscript that:@radix-ui/colorsCSS files--p-*custom propertiesprefers-color-schemesupportpostcss-importandpostcss-nestingfor modular CSStoken-map.jsondefines Radix → PUI token mappingsImplementation Details
@supports (color: color(display-p3))blocks to ensure sRGB consistency.rt-*classes to PUI's[p="*"]attributesFiles Added
package.jsonwith build scripts and dependenciespostcss.config.cjsfor CSS processingsrc/build/gen-tokens.mjs(419 lines) - token generation enginesrc/build/token-map.json- token mapping configurationsrc/components/button.css,input.css,dialog.css- component stylessrc/generated/tokens.css- generated theme tokens (light + dark)src/index.css- main entry pointUsage
The theme automatically provides light/dark variants via
prefers-color-schemeand.darkclass selector.https://claude.ai/code/session_014nSucTSwQuGmUfrfoBM5Zy