🐼 PandaCSS preset for Radix Colors

Brings Radix Colors to 🐼 PandaCSS

Installation

npm install --save-dev pandacss-preset-radix-colors @radix-ui/colors

Usage

Add the preset to your PandaCSS configuration (panda.config.ts)

import { defineConfig } from "@pandacss/dev";

// Import the preset. The name can be anything you want
import radixColorsPreset from "pandacss-preset-radix-colors";

export default defineConfig({
  presets: [
    radixColorsPreset(),
    // Re-add the panda preset if you want to keep
    // the default keyframes, breakpoints, tokens
    // and textStyles provided by PandaCSS
    "@pandacss/preset-panda",
  ],
});

Good to know

The tokens have a different format than you would probably expect. All color names are split up on every capital letter and number, so you would get token paths such as slate.dark.a.1, slate.a.1 and slate.1 instead of slateDarkA1, slateA1 and slate1.

Options

Dark mode

You can add dark mode support by setting darkMode to true. The default condition has been set to .dark &, which can be changed as shown below. Learn more about conditions here.

...
presets: [
  radixColorsPreset({
    darkMode: true,
    // darkMode: {
    //   condition: ".dark &"
    // }
  }),
],

Using base colors such as slate.1 or slate.a.1 would turn into slate.dark.1 and slate.dark.a.1 automatically when your condition is met. A new light variant (such as slate.light.1) will be added as well that can be used to keep a shade light no matter the dark condition.

Color scales

You can specify what color scales to include to slim down the amount of css variables. All color scales are provided by default. Providing nothing or an empty array will include all color scales.

presets: [
  radixColorsPreset({
    // Will only include the gray and blue color scale
    colorScales: ["gray", "blue"],
  }),
],

Auto DCI-P3

You can automatically switch to DCI-P3 colors when the end user supports it by setting autoP3 to true. It will basically conditionally change your variables to the DCI-P3 variant when the condition p3 (@media (color-gamut: p3)) is met.

...
presets: [
  radixColorsPreset({
    autoP3: true,
  }),
],

Attributions

• Radix team for creating the wonderfully crafted colors
• Chakra team for creating 🐼 PandaCSS