feat: extend theme customizer with CSS variables section

[Railly]

Description

Summary

This pull request introduces a new section named CSS Variables to the customize dropdown, allowing developers to modify each CSS Variable granularly. I have implemented this feature using input type color for simplicity, with plans to enhance the UX in the future.

Features

• CSS Variables Customization: Enable detailed control over individual CSS Variables.
• User Experience: Currently kept within a dropdown to maintain simplicity, but I have also explored a fixed sidebar approach in the demo.

Considerations

• UI Complexity: With the extensive options available, there might be a risk of overloading the user. Suggestions to show/hide "advanced color options" are on the table.
• Sidebar Implementation: Considering a sidebar approach similar to Radix Themes or like the demo. Open to feedback.

Demo

See the live demo here https://shadcn-ui-customizer.vercel.app

Future Work

• Opt to use a color picker library.
• Evaluate the possibility of implementing a sidebar.

Screenshots

[vercel]

@Railly is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[Codigo-Fuentes]

this is badass

[SilvianAchim]

Please add this!

[tan-ahmed]

bump

[nrjdalal]

bruh this is some amazing work, make another pull request, to move it forward

[Railly]

hey @shadcn is this something you still want to be merged? I can update the branch if you confirm it!

I can even make the color pickers something like https://tinte.dev/shadcn.