Skip to content

Add mobile-native theme preset, demo toggle, docs and package export#86

Open
developit wants to merge 6 commits intomainfrom
codex/add-mobile-theme-for-pui
Open

Add mobile-native theme preset, demo toggle, docs and package export#86
developit wants to merge 6 commits intomainfrom
codex/add-mobile-theme-for-pui

Conversation

@developit
Copy link
Copy Markdown
Owner

Motivation

  • Provide a mobile-first visual preset to make the component library feel more native on touch devices.
  • Let the demo showcase and persist the preset so designers can preview the mobile look interactively.
  • Ship the theme file as part of the package so consumers can opt into the preset without hacking the source.

Description

  • Add src/themes/mobile-native.css which defines data-theme="mobile-native" tokens and component deltas for a mobile-native look (surfaces, buttons, inputs, segmented controls, shadows, and motion).
  • Expose the new preset via the package exports and update the build script to copy src/themes/*.css into dist/themes/ so ./themes/mobile-native.css is available to consumers.
  • Update the demo: import the theme in demo/src/style.css and extend demo/src/theme-customizer.tsx with DemoTheme state, applyDemoTheme, UI buttons to toggle the preset, and persistence to localStorage under pui-demo-theme.
  • Document the preset in docs/pages/theming.md with usage notes and the data-theme example.

Testing

  • Ran the test suite with pnpm test (Vitest) and the tests succeeded.

Codex Task

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 1, 2026

Deploy Preview for pui-demo ready!

Name Link
🔨 Latest commit 1e6686e
🔍 Latest deploy log https://app.netlify.com/projects/pui-demo/deploys/69a8353a37cf470008b7b495
😎 Deploy Preview https://deploy-preview-86--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 Mar 1, 2026

Size Change: +2.66 kB (+19.28%) ⚠️

Total Size: 16.5 kB

Filename Size Change
dist/themes/mobile-native.css 2.66 kB +2.66 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
dist/index.css 8.39 kB
dist/index.js 5.43 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