RadixUI Color Palette Component

This project provides a React component to visualize a color palette using the Radix UI Colors library. It renders a table displaying various colors and their corresponding tones, offering a clean and organized way to explore the color scales.

[Demo]

Features

• Dynamic Color Tone Generation:
  Automatically generates 12 tones for each Radix UI color scale.

• Interactive Color Table:
  Displays a scrollable table with rows representing color scales and columns for tones (1–12).

• Easy Integration:
  Uses SCSS for styling and Radix UI's CSS variables for consistent theming.

• Customizable and Modular:
  Reusable component suitable for projects requiring color palette visualization.

Add the required Radix UI color CSS files to your project:

npm install @radix-ui/colors

Usage

1. Import the Component and SCSS in Your App:

import RadixUIColorPalette from './RadixUIColorPalette';
import './RadixUIColorPalette.scss';

2. Include the Component in Your JSX:

const App = () => (
  <div>
    <RadixUIColorPalette />
  </div>
);

export default App;

SCSS Configuration

The SCSS file (RadixUIColorPalette.scss) imports Radix UI's color scales and applies the corresponding CSS variables to each color tone.

// Import the required Radix UI color scales
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/mauve.css';
@import '@radix-ui/colors/slate.css';
// ... (other imports)

// Define styles for individual color palette items
.color-palette-item {
    display: block;
    width: 40px;
    height: 40px;
    background-color: transparent;

    &.gray1 {
        background-color: var(--gray1);
    }
    &.gray2 {
        background-color: var(--gray2);
    }
    // Add similar classes for other tones and colors
}