From 5e455ba0e9215989ed6e6ca7c7406762578eaf9e Mon Sep 17 00:00:00 2001
From: code2933 <code2933@outlook.com>
Date: Wed, 18 Oct 2023 14:48:37 +0800
Subject: [PATCH] update(c-alert): Add variant 'error'

---
 src/ui/c-alert/c-alert.demo.vue |  2 +-
 src/ui/c-alert/c-alert.theme.ts | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/ui/c-alert/c-alert.demo.vue b/src/ui/c-alert/c-alert.demo.vue
index 546c7852..844d8703 100644
--- a/src/ui/c-alert/c-alert.demo.vue
+++ b/src/ui/c-alert/c-alert.demo.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const variants = ['warning'] as const;
+const variants = ['warning', 'error'] as const;
 </script>
 
 <template>
diff --git a/src/ui/c-alert/c-alert.theme.ts b/src/ui/c-alert/c-alert.theme.ts
index 36d5d348..2176a102 100644
--- a/src/ui/c-alert/c-alert.theme.ts
+++ b/src/ui/c-alert/c-alert.theme.ts
@@ -3,6 +3,7 @@ import { defineThemes } from '../theme/theme.models';
 import { appThemes } from '../theme/themes';
 
 import WarningIcon from '~icons/mdi/alert-circle-outline';
+import ErrorIcon from '~icons/mdi/close-circle-outline';
 
 export const { useTheme } = defineThemes({
   dark: {
@@ -12,6 +13,12 @@ export const { useTheme } = defineThemes({
       textColor: appThemes.dark.warning.color,
       icon: WarningIcon,
     },
+    error: {
+      backgroundColor: appThemes.dark.error.colorFaded,
+      borderColor: appThemes.dark.error.color,
+      textColor: appThemes.dark.error.color,
+      icon: ErrorIcon,
+    },
   },
   light: {
     warning: {
@@ -20,5 +27,11 @@ export const { useTheme } = defineThemes({
       textColor: darken(appThemes.light.warning.color, 40),
       icon: WarningIcon,
     },
+    error: {
+      backgroundColor: appThemes.light.error.colorFaded,
+      borderColor: appThemes.light.error.color,
+      textColor: darken(appThemes.light.error.color, 40),
+      icon: ErrorIcon,
+    },
   },
 });