Panda & @radix-ui/themes #2095
Replies: 4 comments 6 replies
-
|
Here are some projects that provide a Radix preset for Panda https://github.com/milandekruijf/pandacss-preset-radix-colors You can also take a look at https://park-ui.com/ for some inspiration |
Beta Was this translation helpful? Give feedback.
-
|
@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 :)
// I'm using colors as an example here.
export const colors = {
"tomato-1": { value: "var(--tomato-1)" },
// ...
}; |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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) |
Beta Was this translation helpful? Give feedback.
-
|
Fixed! I think it works now |
Beta Was this translation helpful? Give feedback.
-
|
It seems to not be referencing the tokens properly (the
I'm not sure what I'm doing wrong, though 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
@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? |
Beta Was this translation helpful? Give feedback.
-
|
@kee-oth you can look here if it guides your consumption of radix colors |
Beta Was this translation helpful? Give feedback.
-
|
@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!! |
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions