fix(ui): add toast border color to make it stand-out

src/components/Toast.vue

@@ -18,6 +18,7 @@
           rounded-lg
           border
         "
+        :class="[config.containerBorder]"
         style="pointer-events: auto"
       >
         <feather-icon

src/utils/colors.ts

@@ -34,7 +34,11 @@ export function getBgColorClass(color: string) {
   return `bg-${vcolor}-200`;
 }
 
-export function getColorClass(color: string, type: 'bg' | 'text', value = 300) {
+export function getColorClass(
+  color: string,
+  type: 'bg' | 'text' | 'border',
+  value = 300
+) {
   return `${type}-${getValidColor(color)}-${value}`;
 }
 

src/utils/interactive.ts

@@ -70,6 +70,8 @@ export function getIconConfig(type: ToastType) {
   }[type];
 
   const iconColor = getColorClass(color ?? 'gray', 'text', 400);
+  const containerBackground = getColorClass(color ?? 'gray', 'bg', 100);
+  const containerBorder = getColorClass(color ?? 'gray', 'border', 300);
 
-  return { iconName, color, iconColor };
+  return { iconName, color, iconColor, containerBorder, containerBackground };
 }