card-header and card-footer need radius overrides when bg-color-X set about skeleton HOT 3 CLOSED

<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.

from skeleton.

@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.

from skeleton.

@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.

from skeleton.