[Card] Can't control color and radius

[lgirma]

Would have been nice if we have color and radius props, so that we can control card's background and border radius, the same way we do for buttons and others.

[vladmoroz]

What design do you have in mind?

Also right now all panels like Card, Dropdown Menu, Select, etc don't have a radius prop as we had decided it doesn't make much sense to have one-offs that don't follow the radius you configured in the Theme component. Would curious to learn about your use-case and whether you considered to change the Theme radius instead.

[Wyverex42]

I just ran into a similar thing where I have a grid of cards and I want one of them to be highlighted in the accent color because it is different from the other cards. When browsing through the docs I don't see any inbuilt way to do that.

[vladmoroz]

@Wyverex42 what does your design look like?

[vansickn]

I just ran into a similar thing where I have a grid of cards and I want one of them to be highlighted in the accent color because it is different from the other cards. When browsing through the docs I don't see any inbuilt way to do that.

Trying to achieve the same thing with an inset image in the card. Did you ever find a solution to this? Or did you have to create your own custom card implementation?

[vladmoroz]

@vansickn do you have a design reference for what you were trying to achieve?

[maxkalavera]

You may use Tokens packages/radix-ui-themes/src/styles/tokens/radius.css, add the attribute "data-radius" or seek the way to override the data value in the element in my case worked only with: <Card data-radius='none' />