card-header and card-footer need radius overrides when bg-color-X set

[niktek]

Current Behavior

When setting a bg color on a card-header or card-footer it will overpaint the containing card and its border-radius setting. I think if the user is opting into a card then it should carry through the expected border-radius to the child elements. The following uses tokens to re-apply the border radius on the card-header, but removing them will make it appear like card-footer.

<div class="p-5">
	<div class="card my-10 ">
		<header class="card-header bg-primary-500 rounded-tl-container-token rounded-tr-container-token">Actions</header>
		<section class="p-4">
			<button class="btn variant-filled">Save</button>
		</section>
		<footer class="card-footer bg-primary-500">(footer)</footer>
	</div>
</div>

It also raises a question of whether we should also extend the rounded tokens to match the options TW provides as we are missing tokens for (would we still keep container in there?):

rounded-s-container-token
rounded-e-container-token
rounded-t-container-token
rounded-r-container-token
rounded-b-container-token
rounded-l-container-token
rounded-ss-container-token
rounded-se-container-token
rounded-ee-container-token
rounded-es-container-token

Expected Behavior

No response

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@niktek I think this would be easier to understand with a screenshot.

That said, rounded styles now extend Tailwind's default border radius styles in v3. So this issue would be limited to v2. Header/Footer styles are also gone in v3.

[niktek]

<div class="p-5">
	<div class="card">
		<header class="card-header">Actions</header>
		<section class="p-4">
			<button class="btn variant-filled">Save</button>
		</section>
		<footer class="card-footer">(footer)</footer>
	</div>
</div>

<div class="p-5">
	<div class="card">
		<header class="card-header bg-primary-500">Actions</header>
		<section class="p-4">
			<button class="btn variant-filled">Save</button>
		</section>
		<footer class="card-footer bg-primary-500">(footer)</footer>
	</div>
</div>

<div class="p-5">
	<div class="card">
		<header class="card-header bg-primary-500 rounded-tl-container-token rounded-tr-container-token">Actions</header>
		<section class="p-4">
			<button class="btn variant-filled">Save</button>
		</section>
		<footer class="card-footer bg-primary-500 rounded-bl-container-token rounded-br-container-token">(footer)</footer>
	</div>
</div>

It's not a show stopper at all, but it also doesn't feel right either.

[endigo9740]

@niktek sorry for the delay on this one. Now that I've had a chance to read through this with a clear mind I see what you mean. The goal with the v2 implementation was to keep a unified spacing around the edge of the screen, as well as between sections.

For example, all yellow lines shown should have uniform spacing:

Unfortunately, if you double up the spacing by adding padding within the children, this will lead to a poor result where space appears doubled (or tripled) between the children. This can result in styles that feel very uneven:

That said, if I was to try and handle this sort of layout today, what I'd instead opt for is custom styles like this. This approach should work in Skeleton v2 or v3:

<!-- Surrounding Gap -->
<div class="card p-4 space-y-4">
	<header class="bg-primary-500">Header</header>
	<section>Content</section>
	<footer class="bg-primary-500">Footer</footer>
</div>

<!-- Flush -->
<div class="card">
	<header class="p-4 bg-primary-500">Header</header>
	<section class="p-4">Content</section>
	<footer class="p-4 bg-primary-500">Footer</footer>
</div>

Given the header/footer concepts won't be carrying forward to Skeleton v3, I'd recommend following the pattern above for now. I don't think there's a sane way we can handle every use case folks might in v2, so we'll call this a wash.