Panda & @radix-ui/themes

[jarrodpayne]

I'm just getting started looking into pandacss. For those more familiar with the project, I'm curious how difficult you think it would be to port the @radixui/themes tokens and utilities to panda?

I'd like to build my component library utilizing radix themes, while being able to write my component library css and application css utilizing panda's toolchain.

[segunadebayo]

Here are some projects that provide a Radix preset for Panda

https://github.com/milandekruijf/pandacss-preset-radix-colors
https://github.com/cschroeter/park-ui/tree/main/plugins/panda/src/theme/tokens

You can also take a look at https://park-ui.com/ for some inspiration

[jarrodpayne]

@segunadebayo Thank you for the suggestions. From what I can see those packages are a bit different that what I'm asking about specifically. One thing to note that isn't obvious to everyone; Radix Themes is different from Radix Primitives and Radix Colors.

One of the exports from Radix Themes is a pre bundled styles.css with many (hundreds? thousands?) of tokens defined.

Here's an example of what I see as the primary issue, but I'm so new to panda, I was hoping this preset existed :)

1. Import styles.css from @radix-ui/themes getting all of the tokens (as well as all of the required css). Create panda preset that references all of the tokens instead of redefining them.

// I'm using colors as an example here.
export const colors = {
  "tomato-1": { value: "var(--tomato-1)" },
  // ...
};

[jarrodpayne]

Perhaps another approach to this discussion would be something like this:

What is the best way to consume existing css vars / tokens while making them available to the panda system?

[amosbastian]

I was looking for the same as found this one for Tailwind and adapted it here:

import type { Preset } from "@pandacss/dev";

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

const colorScale = 12;
const radixColors = [
  "tomato",
  "red",
  "ruby",
  "crimson",
  "pink",
  "plum",
  "purple",
  "violet",
  "iris",
  "indigo",
  "blue",
  "cyan",
  "teal",
  "jade",
  "green",
  "grass",
  "bronze",
  "gold",
  "brown",
  "orange",
  "amber",
  "yellow",
  "lime",
  "mint",
  "sky",
];

const radixGrayColors = ["gray", "mauve", "slate", "sage", "olive", "sand"];

const getColor = (color: string, scale: number, alpha?: boolean) => {
  const colors = Array.from(Array(scale).keys()).reduce(
    (acc, _, i) => {
      acc[i + 1] = { value: `var(--${color}-${alpha ? "a" : ""}${i + 1})` };
      return acc;
    },
    {} as Record<number | string, { value: string }>,
  ) as Record<string | number, { value: string }>;

  if (!alpha) {
    colors["contrast"] = { value: `var(--${color}-contrast)` };
    colors["surface"] = {
      value:
        color === "accent"
          ? "var(--accent-surface)"
          : `var(--${color}-surface)`,
    };
  }

  return colors;
};

const getGrayColor = (color: string, scale: number, alpha?: boolean) => {
  const colors = Array.from(Array(scale).keys()).reduce(
    (acc, _, i) => {
      acc[i + 1] = { value: `var(--${color}-${alpha ? "a" : ""}${i + 1})` };
      return acc;
    },
    {} as Record<number | string, { value: string }>,
  ) as Record<string | number, { value: string }>;

  return colors;
};

const getColors = (arr: string[], isGray?: boolean) => {
  const colors = arr.reduce(
    (acc, color) => {
      acc[color] = isGray
        ? getGrayColor(color, colorScale, false)
        : getColor(color, colorScale, false);
      return acc;
    },
    {} as Record<string, Record<number | string, { value: string }>>,
  );

  const alphaColors = arr.reduce(
    (acc, color) => {
      acc[color + "A"] = isGray
        ? getGrayColor(color, colorScale, true)
        : getColor(color, colorScale, true);
      return acc;
    },
    {} as Record<string, Record<number | string, { value: string }>>,
  );
  return { ...colors, ...alphaColors };
};

export function radixPreset(): Preset {
  return definePreset({
    theme: {
      extend: {
        breakpoints: {
          xs: "520px",
          sm: "768px",
          md: "1024px",
          lg: "1280px",
          xl: "1640px",
        },
        tokens: {
          radii: {
            1: { value: "var(--radius-1)" },
            2: { value: "var(--radius-2)" },
            3: { value: "var(--radius-3)" },
            4: { value: "var(--radius-4)" },
            5: { value: "var(--radius-5)" },
            6: { value: "var(--radius-6)" },
            item: { value: "max(var(--radius-2),var(--radius-full))" },
            full: { value: "9999px" },
          },
          shadows: {
            1: { value: "var(--shadow-1)" },
            2: { value: "var(--shadow-2)" },
            3: { value: "var(--shadow-3)" },
            4: { value: "var(--shadow-4)" },
            5: { value: "var(--shadow-5)" },
            6: { value: "var(--shadow-6)" },
          },
          fontSizes: {
            1: { value: "var(--font-size-1)" },
            2: { value: "var(--font-size-2)" },
            3: { value: "var(--font-size-3)" },
            4: { value: "var(--font-size-4)" },
            5: { value: "var(--font-size-5)" },
            6: { value: "var(--font-size-6)" },
            7: { value: "var(--font-size-7)" },
            8: { value: "var(--font-size-8)" },
            9: { value: "var(--font-size-9)" },
          },
          fontWeights: {
            light: { value: "300" },
            regular: { value: "400" },
            medium: { value: "500" },
            bold: { value: "700" },
          },
          lineHeights: {
            1: { value: "var(--line-height-1)" },
            2: { value: "var(--line-height-2)" },
            3: { value: "var(--line-height-3)" },
            4: { value: "var(--line-height-4)" },
            5: { value: "var(--line-height-5)" },
            6: { value: "var(--line-height-6)" },
            7: { value: "var(--line-height-7)" },
            8: { value: "var(--line-height-8)" },
            9: { value: "var(--line-height-9)" },
          },
          letterSpacings: {
            1: { value: "var(--letter-spacing-1)" },
            2: { value: "var(--letter-spacing-2)" },
            3: { value: "var(--letter-spacing-3)" },
            4: { value: "var(--letter-spacing-4)" },
            5: { value: "var(--letter-spacing-5)" },
            6: { value: "var(--letter-spacing-6)" },
            7: { value: "var(--letter-spacing-7)" },
            8: { value: "var(--letter-spacing-8)" },
            9: { value: "var(--letter-spacing-9)" },
          },
          spacing: {
            "rx-1": { value: "var(--space-1)" },
            "rx-2": { value: "var(--space-2)" },
            "rx-3": { value: "var(--space-3)" },
            "rx-4": { value: "var(--space-4)" },
            "rx-5": { value: "var(--space-5)" },
            "rx-6": { value: "var(--space-6)" },
            "rx-7": { value: "var(--space-7)" },
            "rx-8": { value: "var(--space-8)" },
            "rx-9": { value: "var(--space-9)" },
          },
        },
        semanticTokens: {
          colors: {
            accent: { value: getColor("accent", colorScale) },
            accentA: { value: getColor("accent", colorScale, true) },
            ...getColors(radixGrayColors, true),
            gray: { value: getGrayColor("gray", colorScale) },
            ...getColors(radixColors),
            whiteA: { value: getColor("white", colorScale, true) },
            blackA: { value: getColor("black", colorScale, true) },
            overlay: { value: "var(--color-overlay)" },
            "panel-solid": { value: "var(--color-panel-solid)" },
            "panel-translucent": { value: "var(--color-panel-translucent)" },
            surface: { value: "var(--color-surface)" },
            panel: { value: "var(--color-panel)" },
            transparent: { value: "transparent" },
          },
        },
      },
    },
  });
}

First time using Panda, so maybe some stuff is wrong (there was, fixed thanks to @segunadebayo)

[amosbastian]

It seems to not be referencing the tokens properly (the --radii-4 should link to the variable, but doesn't)

I'm not sure what I'm doing wrong, though 🤔

[kee-oth]

@amosbastian I'm trying to do the same thing as you (and have copy-pasted your solution) and I'm running into the same issue, some stuff is defined but it's not getting picked up. I'm wondering if it something to do with the CSS Layers... 🤔

Were you ever able to figure it out?

[anubra266]

@kee-oth you can look here if it guides your consumption of radix colors
https://github.com/milandekruijf/pandacss-preset-radix-colors

[kee-oth]

@anubra266 Thanks for sharing this! The solution from @amosbastian gives me the colors just fine, it's some other stuff like spacing and radius that isn't working. It's just like they showed in their screenshot, the tokens are there but they're not being picked up for some reason.

I'll look at that package though to see if there's any hints on how to fix that. Thanks!!

[dcousineau]

It's been a little over a year but I am just now dealing with this, the best that I can tell is despite setting layering I cannot import Radix's CSS in the css file BEFORE Panda inserts its css, so when I define the border radii to point to var(--radius-6) panda creates a --radii-custom-size: var(--radius-6) but BEFORE --radius-6 is defined and can be used (which goes against some of my CSS variable understandings, but re-defining the panda variable elsewhere seems to kickstart things). I don't currently know a way to control import order with how Panda's postcss preset likes to work....

Nothing to do with import order, everything to do with nested CSS variables not being reevaluated in the cascade, see my comment in the main thread

[dcousineau]

I did some digging into this myself recently and my conclusion is the design of both Radix's css var token theme and how Panda renders tokens are fundamentally incompatible with each other (as of October 6, 2025).

When you define a Panda token Panda will 'wrap' this token definition, e.g.:

defineTokens({
  radii: {
    6: { value: 'var(--radius-6)' },
  },
});

...becomes...

:where(:root, :host) {
  /* ...snip... */
  --radii-6: var(--radius-6);
}

And then when you use css({ borderRadius: '6' }) Panda will render out its own internal reference: border-radius: var(--radii-6).

THE PROBLEM is that 'nested' CSS Variables are not dynamically re-evaluated in the cascade, whatever value that is in the 'parent' css variable (e.g. ---radius-6) in the child's first evaluation (:where(:root, host)) is what the child will be 'forever' until the child itself is overridden. See this JSBin for a simplified demonstration

UNFORTUNATELY Radix UI has a very pleasing and dynamic theme system that relies on cascades to control values and only the light-themed color tokens have a definition at :root. This is why, as others have reported, the Color tokens seem to work but the others do not. If you look at Radix UI's structure you'll see something roughly like:

:root, .light-theme {
  --color-red: ...;
}

.dark-theme {
  --color-red: ...;
}

[data-radius] {
  --radius-factor: ...;
  --radius-1: ...;
}

[data-radius="small"] {
  --radius-factor: ...;
}

You'll notice above that the --radius-* variables are never defined at the root scope, they expect a data-radius attribute parent (which is provided by Radix UI's <Theme /> wrapper component). This means that when --radii-6: var(--radius-6) is evaluated at :root it is undefined because --radius-6 is not defined at the root.

It does not matter if the style is used in a component that is a descendent of data-radius=... because --radii-6 will not be re-evaluated so whatever the value of --radius-6 is at that cascade layer is unfortunately irrelevant.

I haven't tested it explicitly but I'd be willing bet dollars to donuts while referencing the color CSS variables "work" if you try to swap to dark mode via Radix's recommended methods, the colors will not swap correctly.

TLDR If you're using PandaCSS (as it is designed today) with another component library or design system you unfortunately cannot use Panda's tokens system unless said system does not use any form of CSS variable cascading. You must use the css vars directly.