Skip to content

Custom a2ui variables to override#6

Open
burka wants to merge 4 commits intomainfrom
custom-a2ui-variables-to-override
Open

Custom a2ui variables to override#6
burka wants to merge 4 commits intomainfrom
custom-a2ui-variables-to-override

Conversation

@burka
Copy link
Owner

@burka burka commented Dec 31, 2025

No description provided.

burka and others added 4 commits December 31, 2025 09:17
Add --a2ui-* semantic CSS variable aliases that reference shadcn base
variables, making it easier for users to customize themes without
modifying the core design system. Changes include:

- Add semantic aliases in theme.css for colors, typography, and spacing
- Create ThemeCustomizer component with live preview and CSS export
- Fix example page to use defined CSS variables (previously undefined)
- Add Theme Playground section to HomePage for interactive customization

Users can now override --a2ui-accent, --a2ui-bg-primary, etc. to customize
the entire theme without touching shadcn's base variables.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use semantic HTML in Stepper (ol/li instead of div with role)
- Use output element in Skeleton/Spinner for loading states
- Add aria-live region for copy feedback in ThemeCustomizer
- Add reset button and active preset state indication
- Remove unused background field from ThemeValues interface
- Add comprehensive test suite for ThemeCustomizer (15 tests)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove duplicate --a2ui-* variables from generated CSS (aliases already
  reference base vars via var(--primary), var(--radius) in theme.css)
- Add --radius-sm/md/lg/xl/2xl/3xl to @theme inline block, all calculated
  relative to base --radius so Tailwind's rounded-* classes respond to
  the --radius variable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add collapsible "Variable Reference" section with chevron toggle
- Document essential variables (--primary, --radius) vs full palette
- Explain auto-derived variables (--a2ui-*, --radius-sm/md/lg/xl)
- Include link to theme.css on GitHub for complete reference

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant