From 5d6d6473736dc9e5d4dbd386c295f55f6d03a5da Mon Sep 17 00:00:00 2001
From: Matthew L McPeak <m.mcpeak98@icloud.com>
Date: Sat, 11 Jul 2026 15:15:28 -0400
Subject: [PATCH] fix: restore visible borders and heading font on
 Card/Dialog/Select

The CLI's default style uses a very subtle ring-foreground/10 (10%-opacity
ring) instead of a real border for Card, DialogContent, and SelectContent,
which reads as invisible against our dark Hades theme. Swap to a real
border-border + shadow, matching the original PrimeVue-era design's
visible borders.

Also: CardTitle/DialogTitle/AlertTitle referenced a `cn-font-heading`
class that is never defined anywhere (dead weight from the CLI's default
style template), so titles silently fell back to the body font instead of
our --font-serif (Cinzel) heading font. Replaced with the real `font-serif`
utility. Also drops another dead class, `cn-menu-translucent`, from
SelectContent.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 packages/library/src/components/ui/alert/AlertTitle.vue     | 2 +-
 packages/library/src/components/ui/card/Card.vue            | 2 +-
 packages/library/src/components/ui/card/CardTitle.vue       | 2 +-
 packages/library/src/components/ui/dialog/DialogContent.vue | 2 +-
 packages/library/src/components/ui/dialog/DialogTitle.vue   | 2 +-
 packages/library/src/components/ui/select/SelectContent.vue | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/library/src/components/ui/alert/AlertTitle.vue b/packages/library/src/components/ui/alert/AlertTitle.vue
index 1f6e612..1c1a8b6 100644
--- a/packages/library/src/components/ui/alert/AlertTitle.vue
+++ b/packages/library/src/components/ui/alert/AlertTitle.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="alert-title"
-    :class="cn('font-medium group-has-[>svg]/alert:col-start-2 cn-font-heading [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', props.class)"
+    :class="cn('font-medium font-serif group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/library/src/components/ui/card/Card.vue b/packages/library/src/components/ui/card/Card.vue
index a5be5a5..3d8af31 100644
--- a/packages/library/src/components/ui/card/Card.vue
+++ b/packages/library/src/components/ui/card/Card.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<{
   <div
     data-slot="card"
     :data-size="size"
-    :class="cn('ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col', props.class)"
+    :class="cn('border border-border bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm shadow-md has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/library/src/components/ui/card/CardTitle.vue b/packages/library/src/components/ui/card/CardTitle.vue
index eb55649..819a115 100644
--- a/packages/library/src/components/ui/card/CardTitle.vue
+++ b/packages/library/src/components/ui/card/CardTitle.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="card-title"
-    :class="cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm cn-font-heading', props.class)"
+    :class="cn('text-base leading-snug font-medium font-serif group-data-[size=sm]/card:text-sm', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/library/src/components/ui/dialog/DialogContent.vue b/packages/library/src/components/ui/dialog/DialogContent.vue
index a39285c..5438b1d 100644
--- a/packages/library/src/components/ui/dialog/DialogContent.vue
+++ b/packages/library/src/components/ui/dialog/DialogContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DialogContent
       data-slot="dialog-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
+      :class="cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 border border-border grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm shadow-lg duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none', props.class)"
     >
       <slot />
 
diff --git a/packages/library/src/components/ui/dialog/DialogTitle.vue b/packages/library/src/components/ui/dialog/DialogTitle.vue
index d4d034e..211ca04 100644
--- a/packages/library/src/components/ui/dialog/DialogTitle.vue
+++ b/packages/library/src/components/ui/dialog/DialogTitle.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogTitle
     data-slot="dialog-title"
     v-bind="forwardedProps"
-    :class="cn('text-base leading-none font-medium cn-font-heading', props.class)"
+    :class="cn('text-base leading-none font-medium font-serif', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/packages/library/src/components/ui/select/SelectContent.vue b/packages/library/src/components/ui/select/SelectContent.vue
index 0b0a09c..5edbc17 100644
--- a/packages/library/src/components/ui/select/SelectContent.vue
+++ b/packages/library/src/components/ui/select/SelectContent.vue
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :data-align-trigger="position === 'item-aligned'"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
-        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border min-w-36 rounded-lg shadow-md duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,