How to get all colors varianta in components

[alexradulescu]

Hi,

I am looking to be able to control the color variant from the component itself.
For example I might need a green button next to a blue, yellow and red one.
From what I can see Park-UI is made on the principle of 1 gray and 1 accent colour which doesn't work for larger dashboards.

My question would apply to most components, forms elements, buttons, alerts, text etc.

I tried using colorPalette='tomato' for example but it doesn't do anything.

Would appreciate any tips, thanks.

[baueer]

Hi,

I've been using this workaround for customizing components using utility classes without modifying the component code.

As @cschroeter mentioned in the panda repo, I believe that Park-UI utilizes light and dark theme-specific variables for colors since it is based on panda. These variables follow the naming convention:

• --colors-light-[color]-: Light theme color (e.g., --colors-light-red-9)
• --colors-dark-[color]-: Dark theme color (e.g., --colors-dark-red-9)

However, using the generic --colors-[color]- (e.g., --colors-red-9) variable switches colors based on the used color scheme. Each color has 12 variations.

.text-error {
    color: var(--colors-red-9);
}

{error && <Text size="xs" className="text-error">{error.message}</Text>}

Would be glad to see another approaches.