diff --git a/test/components/Alert.spec.ts b/test/components/Alert.spec.ts
index aa1b3c15..89a2a26a 100644
--- a/test/components/Alert.spec.ts
+++ b/test/components/Alert.spec.ts
@@ -15,7 +15,7 @@ describe('Alert', () => {
     ['with avatar', { props: { title: 'Title', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
     ['with as', { props: { title: 'Title', as: 'article' } }],
     ...colors.map((color: string) => [`with color ${color}`, { props: { label: 'Badge', color } }]),
-    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Badge', variant } }]),
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { label: 'Badge', color: 'primary', variant } }]),
     ['with class', { props: { class: 'w-48' } }],
     ['with ui', { props: { ui: { title: 'font-bold' } } }],
     // Slots
diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap
index 72fad784..b6b294db 100644
--- a/test/components/__snapshots__/Alert.spec.ts.snap
+++ b/test/components/__snapshots__/Alert.spec.ts.snap
@@ -205,7 +205,7 @@ exports[`Alert > renders with ui correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant outline correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center" label="Badge">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400" label="Badge">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <!--v-if-->
@@ -217,7 +217,7 @@ exports[`Alert > renders with variant outline correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant soft correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center" label="Badge">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400" label="Badge">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <!--v-if-->
@@ -229,7 +229,7 @@ exports[`Alert > renders with variant soft correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant solid correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white bg-white dark:bg-gray-900" label="Badge">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900" label="Badge">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <!--v-if-->
@@ -241,7 +241,7 @@ exports[`Alert > renders with variant solid correctly 1`] = `
 `;
 
 exports[`Alert > renders with variant subtle correctly 1`] = `
-"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center" label="Badge">
+"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25" label="Badge">
   <!--v-if-->
   <div class="min-w-0 flex-1 flex flex-col gap-1">
     <!--v-if-->