adminforth 1.2.77 → 1.2.78

package/dist/modules/styles.js

@@ -1,6 +1,8 @@
 export const styles = () => ({
     colors: {
         lightHtml: "#FFFFFF", // main background
+        lightPrimary: "#3B82F6", // primary color
+        lightPrimaryOpacity: "alias:lightPrimary opacity:0.1", // primary color opacity
         lightNavbar: "#FFFFFF", // navbar background
         lightNavbarBorder: "rgb(229 231 235)", // border
         lightNavbarText: "#111827", // navbar text
@@ -48,6 +50,8 @@ export const styles = () => ({
         lightButtonsIcon: "#333333", // button icon
         // colors for dark theme
         darkHtml: "#111827",
+        darkPrimary: "#3B82F6", // primary color
+        darkPrimaryOpacity: "alias:darkPrimary opacity:0.1", // primary color opacity
         darkNavbar: "#111827",
         darkNavbarBorder: "#e5e7eb",
         darkNavbarText: "#9ca3af",

package/modules/styles.ts

@@ -4,6 +4,9 @@ export const styles = () => ({
   colors: {
     lightHtml: "#FFFFFF", // main background
 
+    lightPrimary: "#3B82F6", // primary color
+    lightPrimaryOpacity: "alias:lightPrimary opacity:0.1", // primary color opacity
+
     lightNavbar: "#FFFFFF", // navbar background
     lightNavbarBorder: "rgb(229 231 235)", // border
     lightNavbarText: "#111827", // navbar text
@@ -59,6 +62,9 @@ export const styles = () => ({
     // colors for dark theme
     darkHtml: "#111827",
 
+    darkPrimary: "#3B82F6", // primary color
+    darkPrimaryOpacity: "alias:darkPrimary opacity:0.1", // primary color opacity
+
     darkNavbar: "#111827", 
     darkNavbarBorder: "#e5e7eb",
     darkNavbarText: "#9ca3af",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.2.77",
+  "version": "1.2.78",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/App.vue

@@ -107,7 +107,7 @@
         </ul>
 
 
-        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900" role="alert"
+        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity" role="alert"
           v-if="ctaBadge"
         >
           <div class="flex items-center mb-3">
@@ -119,7 +119,7 @@
             <button type="button" 
               class="ms-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center w-6 h-6 text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800" 
               data-dismiss-target="#dropdown-cta" aria-label="Close"
-              v-if="ctaBadge.closable" @click="closeCTA"
+              v-if="ctaBadge?.closable" @click="closeCTA"
             >
               <span class="sr-only">Close</span>
               <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -127,8 +127,8 @@
               </svg>
             </button>
           </div>
-          <p class="mb-3 text-sm fill-blue-800 dark:fill-blue-400 text-blue-800 dark:text-blue-400" v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
-          <p class="text-sm text-blue-800 dark:text-blue-400" v-else>
+          <p class="mb-3 text-sm fill-lightPrimary dark:fill-darkPrimary text-lightPrimary dark:text-darkPrimary" v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
+          <p class="mb-3 text-sm fill-lightPrimary dark:fill-darkPrimary text-lightPrimary dark:text-darkPrimary" v-else>
             {{ ctaBadge.text }}  
           </p>
           <!-- <a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a> -->
@@ -342,8 +342,8 @@ onBeforeMount(()=>{
 
 const ctaBadge = computed(() => {
   const badge = coreStore.config?.announcementBadge;
-  const hash = badge.closable ? JSON.stringify(badge).split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0) : '';
-  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
+  const hash = badge?.closable ? JSON.stringify(badge).split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0) : '';
+  if (badge?.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
     return null;
   }
   return {...badge, hash};

package/spa/src/components/ResourceListTable.vue

@@ -108,7 +108,7 @@
                 primaryKey: row._primaryKeyValue,
               }
             }"
-            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
             :data-tooltip-target="`tooltip-show-${rowI}`"
           >
             <IconEyeSolid class="w-5 h-5 me-2"/>
@@ -129,7 +129,7 @@
                 primaryKey: row._primaryKeyValue 
               } 
             }"
-            class="font-medium text-blue-600 dark:text-blue-500 hover:underline ms-3"
+            class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
             :data-tooltip-target="`tooltip-edit-${rowI}`"
           >
             <IconPenSolid class="w-5 h-5 me-2"/>
@@ -143,7 +143,7 @@
           </div>
 
           <button v-if="resource.options?.allowedActions.delete"
-                  class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3"
+                  class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
                   :data-tooltip-target="`tooltip-delete-${rowI}`"
                   @click="deleteRecord(row)"
           >