PageCard: inconsistent variant naming — `outline` has bg-default, `solid` renders as inverted/dark

[stijns96]

Bug Report / Design Inconsistency

Description

The PageCard component's variant prop uses the same variant names as other Nuxt UI components (e.g. Button, Alert, Badge), but the visual behaviour is inconsistent in two ways.

---

Issue 1 — outline has a background (bg-default)

The outline variant of PageCard applies bg-default to the root element:

// .nuxt/ui/page-card.ts
"outline": {
  "root": "bg-default ring ring-default",
  "description": "text-muted"
}

In every other component that uses the outline variant (e.g. Button), outline means no background — transparent — only a border/ring:

// .nuxt/ui/button.ts (compoundVariant, e.g. primary + outline)
"ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 ... disabled:bg-transparent"

The outline name strongly implies "border only, no fill". Using bg-default violates this expectation. A more accurate name for this appearance would be something like surface or card, or the background should be removed to match the system-wide semantics.

---

Issue 2 — solid renders as dark/inverted instead of a default background

The solid variant of PageCard applies bg-inverted text-inverted:

// .nuxt/ui/page-card.ts
"solid": {
  "root": "bg-inverted text-inverted",
  "title": "text-inverted",
  "description": "text-dimmed"
}

In light mode this makes the card near-black, which is unexpected. In other components, solid means filled with the current brand/semantic colour (e.g. Button solid = bg-primary). An inverted, dark card would be better named inverted, dark, or contrast.

Additionally, the two variants appear behaviorally swapped relative to developer expectations:

• outline visually looks like a "solid" white/default card (has a background)
• solid visually looks like an inverted/dark card

---

Expected behaviour

Variant	Expected (by analogy with Button, Alert, Badge, …)
outline	Transparent background, visible ring/border only
solid	Opaque fill with a brand or strong semantic colour, not bg-inverted

---

Reproduction

<UPageCard variant="outline" title="Outline" description="Should be transparent, like UButton outline" />
<UPageCard variant="solid" title="Solid" description="Unexpectedly dark in light mode" />

Compare with:

<UButton variant="outline" label="Outline button" />  <!-- no background -->
<UButton variant="solid" label="Solid button" />      <!-- brand colour background -->

---

Environment

• @nuxt/ui v4 (latest)
• Nuxt 4
• Affects light mode and dark mode

---

Possible fix

Either:

1. Rename the variants to reflect their actual visual output — e.g. outline → surface / card, solid → inverted — or
2. Align the behaviour with the rest of the component system: make outline have a transparent background and give solid a brand-coloured or strongly elevated background instead of bg-inverted.