Unocss Preset Radix
A preset for UnoCSS to let you use Radix color palette
Overview
Unocss-preset-radix offers a powerful enhancement for developers working with the Radix UI framework, providing a versatile color and variant management system. With features such as alpha colors, optimized foregrounds, and easy integration for data attributes, it streamlines the design process while maintaining flexibility across various project needs. The preset is particularly beneficial for those looking to implement a sophisticated color palette without the overhead typically associated with such customization.
Incorporating unocss-preset-radix into your development workflow promises an intuitive user experience while enabling a visually cohesive design. Whether you are a seasoned developer or just starting, this preset is a valuable addition to your toolkit, ensuring that you can achieve consistent styling across your components with ease.
Features
-
Alphas: Enhanced color options are available as extra shades, allowing for alpha variants like
bg-blue5Ato add depth to your designs. -
Optimized Foregrounds: Includes optimized foreground colors accessible through -fg shades, offering a quick way to achieve text styles and maintain contrast.
-
Data Variants: Adds shortcut variants for common data attributes used in Radix, making it easier to integrate with diverse component libraries.
-
Customizable Prefixes: You have control over the prefix used for generated CSS variables and variants, tailoring the preset to fit your naming conventions.
-
Dark Mode Support: Automatic inclusion of dark mode and alpha variants ensures your design remains consistent across light and dark themes.
-
Hue Utility: Dynamic hue adjustments are possible with utilities like
hue-{scale}, allowing for flexible color selections driven by JavaScript or other methods. -
Alias Support: Facilitates setting up color aliases with automatic alpha generation, simplifying color management and enhancing reusability.
-
Extend Options: Flexibility in palette integration is provided through a boolean option that allows merging or complete overwriting of existing palettes.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vitepress
VitePress is a static site generator designed for creating documentation websites. It offers a lightweight and fast development experience using Vue.js and Markdown, with features such as live-reload, theming, and customizable layout components.
- UnoCSS
UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.
- Alpine.js
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.