radix-palette v0.1.4
Radix Palette
Radix Palette is a TailwindCSS utility that enhances Radix Colors by solving key integration challenges. It provides a seamless, flexible color management solution for web developers, supporting alpha value injection, P3 color display, and unified light/dark mode color systems. The project simplifies color design by offering a more intuitive and technically robust approach to color implementation in modern web development.
Implementation Progress
Opacity Modifier
Supports opacity adjustments directly in classes, allowing for convenient transparency control (e.g.,bg-gray-4/50
,text-blue-12/80
).Composability
Enables light and dark mode configurations in a single declaration, streamlining the setup for dynamic theming.P3 Display Support
Working towards P3 color display compatibility. Current challenges exist with Tailwind’s flexibility, particularly around retaining alpha value adjustments across different contexts.
Usage
Install
npm install radix-palette
# Or with Yarn
yarn add radix-palette
# Or with PNPM
pnpm add radix-palette
Import in CSS
/*
* CSS Color Import Best Practices
*
* Selective Color Importing: Optimizing Your Stylesheet
*
* Instead of importing entire color libraries or palettes,
* import only the specific colors you need to:
* 1. Reduce stylesheet file size
* 2. Improve performance
* 3. Keep your design clean and intentional
*
*/
/* slate */
@import "radix-palette/dist/slate.css";
@import "radix-palette/dist/slate-alpha.css";
@import "radix-palette/dist/slate-dark.css";
@import "radix-palette/dist/slate-dark-alpha.css";
/* Purple - only light colors for branding */
@import "radix-palette/dist/purple.css";
/* @import "radix-palette/dist/purple-alpha.css"; */
/* @import "radix-palette/dist/purple-dark.css"; */
/* @import "radix-palette/dist/purple-dark-alpha.css"; */
/* Red - full color palette required */
@import "radix-palette/dist/red.css";
@import "radix-palette/dist/red-alpha.css";
@import "radix-palette/dist/red-dark.css";
@import "radix-palette/dist/red-dark-alpha.css";
/* Orange - no need alpha */
@import "radix-palette/dist/orange.css";
/* @import "radix-palette/dist/orange-alpha.css"; */
@import "radix-palette/dist/orange-dark.css";
/* @import "radix-palette/dist/orange-dark-alpha.css"; */
Import in Tailwind CSS Config
const { radixPaletteToTailwind } = require("radix-palette/utils");
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
extend: {
// ...
colors: {
brand: {
// If a specific color number is provided,
// return the transformed single color
light: radixPaletteToTailwind({ palette: "purple", number: 8 }),
DEFAULT: radixPaletteToTailwind({ palette: "purple", number: 10 }),
dark: radixPaletteToTailwind({ palette: "purple", number: 12 }),
},
// If no number is provided, return all colors in the family
// (optionally with alpha and additional colors)
// slate with alpha and additional colors
slate: radixPaletteToTailwind({ palette: "slate" }),
// red with alpha colors
red: radixPaletteToTailwind({ palette: "red", includeAlpha: true, includeAdditionalColors: false }),
// orange with additional colors only
orange: radixPaletteToTailwind({ palette: "orange", includeAlpha: false, includeAdditionalColors: true }),
// ...
},
// ...
},
},
// ...
};
Reference
- Tailwind configuration: https://tailwindcss.com/docs/configuration
- Original radix palette: https://github.com/radix-ui/colors