feat(Card): add variant prop

src/runtime/components/Card.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
@@ -9,12 +10,15 @@ const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof the
 
 const card = tv({ extend: tv(theme), ...(appConfigCard.ui?.card || {}) })
 
+type CardVariants = VariantProps<typeof card>
+
 export interface CardProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
+  variant?: CardVariants['variant']
   class?: any
   ui?: Partial<typeof card.slots>
 }
@@ -29,13 +33,13 @@ extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 
 const props = defineProps<CardProps>()
 const slots = defineSlots<CardSlots>()
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = card()
+const ui = computed(() => card({ variant: props.variant }))
 </script>
 
 <template>

src/theme/card.ts

@@ -1,8 +1,27 @@
 export default {
   slots: {
-    root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
+    root: 'rounded-[calc(var(--ui-radius)*2)]',
     header: 'p-4 sm:px-6',
     body: 'p-4 sm:p-6',
     footer: 'p-4 sm:px-6'
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
+      },
+      outline: {
+        root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
+      },
+      soft: {
+        root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
+      },
+      subtle: {
+        root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'outline'
   }
 }