chore: add styles for toast

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -238,6 +238,13 @@ export const styles = () => ({
     lightThreeDotsMenuBodyText: "#111827",
     lightThreeDotsMenuBodyTextHover: "#111827",
 
+    lightToastBackground: "#FFFFFF",
+    lightToastCloseIcon: "#9CA3AF",
+    lightToastCloseIconHover: "#111827",
+    lightToastCloseIconBackground: "#FFFFFF",
+    lightToastCloseIconBackgroundHover: "#F3F4F6",
+    lightToastCloseIconFocusRing: "#D1D5DB",
+    lightToastText: "#6B7280",
 
 
     // colors for dark theme
@@ -467,6 +474,14 @@ export const styles = () => ({
     darkThreeDotsMenuBodyText: "#9CA3AF",
     darkThreeDotsMenuBodyTextHover: "#FFFFFF",
 
+    darkToastBackground: "#1F2937",
+    darkToastCloseIcon: "#6B7280",
+    darkToastCloseIconHover: "#FFFFFF",
+    darkToastCloseIconBackground: "#1F2937",
+    darkToastCloseIconBackgroundHover: "#374151",
+    darkToastCloseIconFocusRing: "#374151",
+    darkToastText: "#9CA3AF",
+
   },
   boxShadow: {
     customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

adminforth/spa/src/components/Toast.vue

@@ -1,11 +1,11 @@
 <template>
 
 
-<div class="flex items-center w-full p-4 text-gray-500 rounded-lg shadow-lg dark:text-gray-400 dark:bg-gray-800 bg-white"
+<div class="flex items-center w-full p-4 rounded-lg shadow-lg dark:text-darkToastText dark:bg-darkToastBackground bg-lightToastBackground text-lightToastText"
     role="alert"
     :class="
         {
-            'danger': 'bg-red-100',
+            'danger': 'bg-red-100 ',
         }[toast.variant]
     "
 >
@@ -36,7 +36,7 @@
 
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
-    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
         <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
         </svg>

dev-demo/custom/Dash.vue

@@ -228,6 +228,58 @@
         :min="1"
         :max="100"
       />
+
+    <Toast
+      :toast="{
+        id: '1',
+        variant: 'info',
+        message: 'This is an info toast',
+        timeout: 'unlimited'
+      }"
+      @close="() => {}"
+    />
+
+    <Toast
+      :toast="{
+        id: '2',
+        variant: 'danger',
+        message: 'This is a danger toast',
+        timeout: 'unlimited'
+      }"
+      @close="() => {}"
+    />
+
+    <Toast
+      :toast="{
+        id: '3',
+        variant: 'warning',
+        message: 'This is a warning toast',
+        timeout: 'unlimited'
+      }"
+      @close="() => {}"
+    />
+
+    <Toast
+      :toast="{
+        id: '4',
+        variant: 'success',
+        message: 'This is a success toast',
+        timeout: 'unlimited'
+      }"
+      @close="() => {}"
+    />
+
+    <Toast
+      :toast="{
+        id: '5',
+        variant: 'info',
+        messageHtml: '<b>This is HTML toast</b><br><i>with custom content</i>',
+        timeout: 'unlimited'
+      }"
+      @close="() => {}"
+    />
+
+
   </div>
 
 
@@ -255,6 +307,7 @@ import { Skeleton } from '@/afcl';
 import { Spinner } from '@/afcl';
 import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
+import Toast from '@/components/Toast.vue';
 
 const files: Ref<File[]> = ref([])
 

dev-demo/index.ts

@@ -362,6 +362,14 @@ export const admin = new AdminForth({
           ThreeDotsMenuBodyText: "alias:lightThreeDotsMenuIconDots",
           ThreeDotsMenuBodyTextHover: "alias:lightlightThreeDotsMenuIconDots opacity:0.8",
 
+          ToastBackground: "alias:lightPrimary opacity:0.6",
+          ToastCloseIcon: "alias:lightPrimary darken",
+          ToastCloseIconHover: "alias:lightToastCloseIcon darken",
+          ToastCloseIconBackground: "alias:lightToastCloseIcon lighten",
+          ToastCloseIconBackgroundHover: "alias:lightToastCloseIcon opacity:0.6",
+          ToastCloseIconFocusRing: "alias:lightToastCloseIcon",
+          ToastText: "alias:lightPrimary inverse",
+
         },
         dark: {
           primary: '#bd1a76',
@@ -552,6 +560,15 @@ export const admin = new AdminForth({
           ThreeDotsMenuBodyBackgroundHover: "alias:darkThreeDotsMenuBodyBackground darken",
           ThreeDotsMenuBodyText: "alias:darkThreeDotsMenuIconDots",
           ThreeDotsMenuBodyTextHover: "alias:darkThreeDotsMenuIconDots opacity:0.8",
+
+          ToastBackground: "alias:darkPrimary opacity:0.6",
+          ToastCloseIcon: "alias:darkPrimary darken",
+          ToastCloseIconHover: "alias:darkToastCloseIcon darken",
+          ToastCloseIconBackground: "alias:darkToastCloseIcon opacity:0.6",
+          ToastCloseIconBackgroundHover: "alias:darkToastCloseIcon lighten",
+          ToastCloseIconFocusRing: "alias:darkToastCloseIcon",
+          ToastText: "alias:darkPrimary inverse",
+
         }
       }
     },