Skip to content

Restore distinct default and outline card surfaces #2845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
calebporzio merged 1 commit into from
Sep 28, 2026
Merged

Restore distinct default and outline card surfaces #2845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions dist/flux.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ form) is supported, but nested cards and parts inside a body start a new context
@custom-variant flux-card-divided (&:where([data-flux-card][data-flux-card-body-variant="divided"] > &, [data-flux-card][data-flux-card-body-variant="divided"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-separated (&:where([data-flux-card][data-flux-card-body-variant="separated"] > &, [data-flux-card][data-flux-card-body-variant="separated"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-divider-inset (&:where([data-flux-card][data-flux-card-divider="inset"] > &, [data-flux-card][data-flux-card-divider="inset"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-well (&:where([data-flux-card]:is([data-flux-card-variant="outline"], [data-flux-card-variant="ghost"]) > &, [data-flux-card]:is([data-flux-card-variant="outline"], [data-flux-card-variant="ghost"]) > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-white (&:where([data-flux-card][data-flux-card-variant="outline"] > &, [data-flux-card][data-flux-card-variant="outline"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-ghost (&:where([data-flux-card][data-flux-card-variant="ghost"] > &, [data-flux-card][data-flux-card-variant="ghost"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-raised (&:where([data-flux-card]:not([data-flux-card-variant="outline"], [data-flux-card-variant="ghost"]) > &, [data-flux-card]:not([data-flux-card-variant="outline"], [data-flux-card-variant="ghost"]) > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-well (&:where([data-flux-card]:is([data-flux-card-variant="default"], [data-flux-card-variant="outline"]) > &, [data-flux-card]:is([data-flux-card-variant="default"], [data-flux-card-variant="outline"]) > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-white (&:where([data-flux-card][data-flux-card-variant="default"] > &, [data-flux-card][data-flux-card-variant="default"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-outline (&:where([data-flux-card][data-flux-card-variant="outline"] > &, [data-flux-card][data-flux-card-variant="outline"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-raised (&:where([data-flux-card]:not([data-flux-card-variant="default"], [data-flux-card-variant="outline"]) > &, [data-flux-card]:not([data-flux-card-variant="default"], [data-flux-card-variant="outline"]) > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-muted (&:where([data-flux-card][data-flux-card-variant="muted"] > &, [data-flux-card][data-flux-card-variant="muted"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-soft (&:where([data-flux-card][data-flux-card-variant="soft"] > &, [data-flux-card][data-flux-card-variant="soft"] > :not([data-flux-card], [data-flux-card-body]) > &));
@custom-variant flux-card-filled (&:where([data-flux-card][data-flux-card-variant="filled"] > &, [data-flux-card][data-flux-card-variant="filled"] > :not([data-flux-card], [data-flux-card-body]) > &));
Expand Down
2 changes: 1 addition & 1 deletion stubs/resources/views/flux/card/body.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
$classes = Flux::classes()
->add('flux-card-panel:border flux-card-panel:[:where(&)]:border-transparent flux-card-panel:before:inset-ring')
->add('flux-card-panel:flux-card-well:[:where(&)]:bg-zinc-50 flux-card-panel:flux-card-white:dark:[:where(&)]:bg-black/15')
->add('flux-card-panel:flux-card-raised:[:where(&)]:bg-white flux-card-panel:flux-card-raised:dark:[:where(&)]:bg-white/4 flux-card-panel:flux-card-ghost:dark:[:where(&)]:bg-white/4')
->add('flux-card-panel:flux-card-raised:[:where(&)]:bg-white flux-card-panel:flux-card-raised:dark:[:where(&)]:bg-white/4 flux-card-panel:flux-card-outline:dark:[:where(&)]:bg-white/4')
->add('flux-card-inset:[:where(&)]:before:inset-ring-zinc-900/8')
->add('flux-card-inset:flux-card-well:dark:[:where(&)]:before:inset-ring-white/8 flux-card-inset:flux-card-raised:dark:[:where(&)]:before:inset-ring-white/10')
->add('flux-card-inset:flux-card-well:[:where(&)]:before:inset-shadow-[0_1.5px_2.5px_rgb(0_0_0/0.05)] flux-card-inset:flux-card-well:dark:[:where(&)]:before:inset-shadow-none flux-card-inset:flux-card-raised:[:where(&)]:shadow-xs')
Expand Down
12 changes: 6 additions & 6 deletions stubs/resources/views/flux/card/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

@props([
'body' => 'seamless',
'variant' => null,
'variant' => 'default',
'divider' => null,
'size' => null,
'highlight' => true,
Expand All @@ -19,16 +19,16 @@
// sits over the page and keeps its contrast on any background (see flux.css); muted and soft edges include
// their fill's tint for that reason. In dark mode the edge lies over the fill instead. Filled has no edge to
// show. A divided or separated card's white body needs a real edge whatever the variant, so those match the
// ghost variant's weight...
// outline variant's weight...
->add($variant === 'filled' ? 'border [:where(&)]:border-transparent' : 'border bg-clip-padding dark:bg-clip-border')
->add($coloredBands ? '[:where(&)]:border-zinc-900/10 dark:[:where(&)]:border-white/10' : match ($variant) {
'filled' => '',
'muted' => '[:where(&)]:border-zinc-900/10 dark:[:where(&)]:border-white/12',
'soft' => '[:where(&)]:border-zinc-900/7 dark:[:where(&)]:border-white/7',
'ghost' => '[:where(&)]:border-zinc-900/10 dark:[:where(&)]:border-white/15',
'outline' => '[:where(&)]:border-zinc-900/10 dark:[:where(&)]:border-white/15',
default => '[:where(&)]:border-zinc-900/10 dark:[:where(&)]:border-white/10',
})
->add(in_array($variant, [null, 'outline'], true) ? '[:where(&)]:shadow-xs dark:[:where(&)]:shadow-none' : '')
->add(in_array($variant, [null, 'default'], true) ? '[:where(&)]:shadow-xs dark:[:where(&)]:shadow-none' : '')
// A faint highlight just inside the edge, drawn over the card's parts so bands and panels that
// reach the edge don't cover it. Its corners follow the inside of the edge rather than the outside, and it
// fades out toward the bottom, like light falling from above. Filled has no edge for it to follow, and dark
Expand All @@ -38,7 +38,7 @@
'filled' => '[:where(&)]:bg-zinc-900/3 dark:[:where(&)]:bg-white/6',
'muted' => '[:where(&)]:bg-zinc-900/4 dark:[:where(&)]:bg-white/7',
'soft' => '[:where(&)]:bg-zinc-900/2 dark:[:where(&)]:bg-white/5',
'ghost' => '[:where(&)]:bg-transparent',
'outline' => '[:where(&)]:bg-transparent',
default => '[:where(&)]:bg-white dark:[:where(&)]:bg-white/10',
})
;
Expand All @@ -47,7 +47,7 @@
// [data-flux-card-body] already means <flux:card.body>...
$attributes = $attributes->merge([
'data-flux-card-body-variant' => $body,
'data-flux-card-variant' => $variant ?? 'outline',
'data-flux-card-variant' => $variant ?? 'default',
'data-flux-card-divider' => $divider,
]);

Expand Down
Loading