chore: reduse amound of styles for the edit and create views

Author: yaroslav8765

adminforth/modules/styles.ts

@@ -246,33 +246,32 @@ export const styles = () => ({
     lightToastCloseIconFocusRing: "#D1D5DB",
     lightToastText: "#6B7280",
 
-    lightCreateViewCancelButtonBackground: "#FFFFFF",
-    lightCreateViewCancelButtonBackgroundHover: "#F3F4F6",
-    lightCreateViewCancelButtonText: "#111827",
-    lightCreateViewCancelButtonTextHover: "alias:lightPrimary",
-    lightCreateViewCancelButtonFocusRing: "#F3F4F6",
-    lightCreateViewCancelButtonBorder: "#D1D5DB",
-
-    lightCreateViewSaveButtonBackground: "#FFFFFF",
-    lightCreateViewSaveButtonBackgroundHover: "#F3F4F6",
+
+    //Show views
+    /* CreateView buttons */
+    lightCreateViewButtonBackground: "#FFFFFF",
+    lightCreateViewButtonBackgroundHover: "#F3F4F6",
+    lightCreateViewButtonText: "#111827",
+    lightCreateViewButtonTextHover: "alias:lightPrimary",
+    lightCreateViewButtonFocusRing: "#F3F4F6",
+    lightCreateViewButtonBorder: "#D1D5DB",
+
     lightCreateViewSaveButtonText: "#DC2626",
     lightCreateViewSaveButtonTextHover: "#B91C1C",
-    lightCreateViewSaveButtonFocusRing: "#F3F4F6",
-    lightCreateViewSaveButtonBorder: "#D1D5DB",
-
-    lightEditViewCancelButtonBackground: "#FFFFFF",
-    lightEditViewCancelButtonBackgroundHover: "#F3F4F6",
-    lightEditViewCancelButtonText: "#111827",
-    lightEditViewCancelButtonTextHover: "alias:lightPrimary",
-    lightEditViewCancelButtonFocusRing: "#F3F4F6",
-    lightEditViewCancelButtonBorder: "#D1D5DB",
-
-    lightEditViewSaveButtonBackground: "#FFFFFF",
-    lightEditViewSaveButtonBackgroundHover: "#F3F4F6",
+
+    /* EditView buttons */
+    lightEditViewButtonBackground: "#FFFFFF",
+    lightEditViewButtonBackgroundHover: "#F3F4F6",
+    lightEditViewButtonText: "#111827",
+    lightEditViewButtonTextHover: "alias:lightPrimary",
+    lightEditViewButtonFocusRing: "#F3F4F6",
+    lightEditViewButtonBorder: "#D1D5DB",
+
     lightEditViewSaveButtonText: "#DC2626",
     lightEditViewSaveButtonTextHover: "#B91C1C",
-    lightEditViewSaveButtonFocusRing: "#F3F4F6",
-    lightEditViewSaveButtonBorder: "#D1D5DB",
+
+    /* ListView buttons */
+
 
 
 
@@ -511,34 +510,27 @@ export const styles = () => ({
     darkToastCloseIconFocusRing: "#374151",
     darkToastText: "#9CA3AF",
 
+///////////////////////////////////////////////////////////////////
+    darkCreateViewButtonBackground: "#1F2937",
+    darkCreateViewButtonBackgroundHover: "#374151",
+    darkCreateViewButtonText: "#9CA3AF",
+    darkCreateViewButtonTextHover: "#FFFFFF",
+    darkCreateViewButtonFocusRing: "#374151",
+    darkCreateViewButtonBorder: "#4B5563",
 
-    darkCreateViewCancelButtonBackground: "#1F2937",
-    darkCreateViewCancelButtonBackgroundHover: "#374151",
-    darkCreateViewCancelButtonText: "#9CA3AF",
-    darkCreateViewCancelButtonTextHover: "#FFFFFF",
-    darkCreateViewCancelButtonFocusRing: "#374151",
-    darkCreateViewCancelButtonBorder: "#4B5563",
-
-    darkCreateViewSaveButtonBackground: "#1F2937",
-    darkCreateViewSaveButtonBackgroundHover: "#374151",
     darkCreateViewSaveButtonText: "#EF4444",
     darkCreateViewSaveButtonTextHover: "#FFFFFF",
-    darkCreateViewSaveButtonFocusRing: "#374151",
-    darkCreateViewSaveButtonBorder: "#4B5563",
-
-    darkEditViewCancelButtonBackground: "#1F2937",
-    darkEditViewCancelButtonBackgroundHover: "#374151",
-    darkEditViewCancelButtonText: "#9CA3AF",
-    darkEditViewCancelButtonTextHover: "#FFFFFF",
-    darkEditViewCancelButtonFocusRing: "#374151",
-    darkEditViewCancelButtonBorder: "#4B5563",
-
-    darkEditViewSaveButtonBackground: "#1F2937",
-    darkEditViewSaveButtonBackgroundHover: "#374151",
+
+    darkEditViewButtonBackground: "#1F2937",
+    darkEditViewButtonBackgroundHover: "#374151",
+    darkEditViewButtonText: "#9CA3AF",
+    darkEditViewButtonTextHover: "#FFFFFF",
+    darkEditViewButtonFocusRing: "#374151",
+    darkEditViewButtonBorder: "#4B5563",
+
     darkEditViewSaveButtonText: "#EF4444",
     darkEditViewSaveButtonTextHover: "#FFFFFF",
-    darkEditViewSaveButtonFocusRing: "#374151",
-    darkEditViewSaveButtonBorder: "#4B5563",
+
 
   },
   boxShadow: {

adminforth/spa/src/views/CreateView.vue

@@ -13,14 +13,14 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewCancelButtonText focus:outline-none bg-lightCreateViewCancelButtonBackground rounded border border-lightCreateViewCancelButtonBorder hover:bg-lightCreateViewCancelButtonBackgroundHover hover:text-lightCreateViewCancelButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewCancelButtonFocusRing dark:focus:ring-darkCreateViewCancelButtonFocusRing dark:bg-darkCreateViewCancelButtonBackground dark:text-darkCreateViewCancelButtonText dark:border-darkCreateViewCancelButtonBorder dark:hover:text-darkCreateViewCancelButtonTextHover dark:hover:bg-darkCreateViewCancelButtonBackgroundHover"
+        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
       </button>
 
       <button  
         @click="saveRecord"
-        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewSaveButtonBackground rounded border border-lightCreateViewSaveButtonBorder hover:bg-lightCreateViewSaveButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewSaveButtonFocusRing dark:focus:ring-darkCreateViewSaveButtonFocusRing dark:bg-darkCreateViewSaveButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewSaveButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewSaveButtonBackgroundHover disabled:opacity-50"
+        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving"

adminforth/spa/src/views/EditView.vue

@@ -12,14 +12,14 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewCancelButtonText  rounded-default focus:outline-none bg-lightEditViewCancelButtonBackground rounded border border-lightEditViewCancelButtonBorder hover:bg-lightEditViewCancelButtonBackground hover:text-lightEditViewCancelButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewCancelButtonFocusRing dark:focus:ring-darkEditViewCancelButtonFocusRing dark:bg-darkEditViewCancelButtonBackground dark:text-darkEditViewCancelButtonText dark:border-darkEditViewCancelButtonBorder dark:hover:text-darkEditViewCancelButtonTextHover dark:hover:bg-darkEditViewCancelButtonBackgroundHover"
+        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewButtonText  rounded-default focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
       </button>
 
       <button
         @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewSaveButtonBackground rounded border border-lightEditViewSaveButtonBorder hover:bg-lightEditViewSaveButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewSaveButtonFocusRing dark:focus:ring-darkEditViewSaveButtonFocusRing dark:bg-darkEditViewSaveButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewSaveButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewSaveButtonBackground disabled:opacity-50"
+        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />

dev-demo/index.ts

@@ -369,34 +369,26 @@ export const admin = new AdminForth({
           ToastCloseIconBackgroundHover: "alias:lightToastCloseIcon opacity:0.6",
           ToastCloseIconFocusRing: "alias:lightToastCloseIcon",
           ToastText: "alias:lightPrimary inverse",
+/////////////////////////////////////////////////////////////////////////////////////////
+          CreateViewButtonBackground: "alias:lightPrimary",
+          CreateViewButtonBackgroundHover: "alias:lightCreateViewButtonBackground lighten",
+          CreateViewButtonText: "alias:lightCreateViewButtonBackground inverse",
+          CreateViewButtonTextHover: "alias:lightCreateViewButtonText opacity:0.8",
+          CreateViewButtonFocusRing: "alias:lightCreateViewButtonBackground",
+          CreateViewButtonBorder: "alias:lightCreateViewButtonBackground darken",
 
-          CreateViewCancelButtonBackground: "alias:lightPrimary",
-          CreateViewCancelButtonBackgroundHover: "alias:lightCreateViewCancelButtonBackground lighten",
-          CreateViewCancelButtonText: "alias:lightCreateViewCancelButtonBackground inverse",
-          CreateViewCancelButtonTextHover: "alias:lightCreateViewCancelButtonText opacity:0.8",
-          CreateViewCancelButtonFocusRing: "alias:lightCreateViewCancelButtonBackground",
-          CreateViewCancelButtonBorder: "alias:lightCreateViewCancelButtonBackground darken",
-
-          CreateViewSaveButtonBackground: "alias:lightPrimary",
-          CreateViewSaveButtonBackgroundHover: "alias:lightCreateViewCancelButtonBackground lighten",
           CreateViewSaveButtonText: "#DC2626",
           CreateViewSaveButtonTextHover: "#B91C1C",
-          CreateViewSaveButtonFocusRing: "alias:lightCreateViewCancelButtonBackground",
-          CreateViewSaveButtonBorder: "alias:lightCreateViewCancelButtonBackground darken",
-
-          EditViewCancelButtonBackground: "alias:lightPrimary",
-          EditViewCancelButtonBackgroundHover: "alias:lightEditViewCancelButtonBackground lighten",
-          EditViewCancelButtonText: "alias:lightEditViewCancelButtonBackground inverse",
-          EditViewCancelButtonTextHover: "alias:lightEditViewCancelButtonText opacity:0.8",
-          EditViewCancelButtonFocusRing: "alias:lightEditViewCancelButtonBackground",
-          EditViewCancelButtonBorder: "alias:lightEditViewCancelButtonBackground darken",
-
-          EditViewSaveButtonBackground: "alias:lightPrimary",
-          EditViewSaveButtonBackgroundHover: "alias:lightEditViewCancelButtonBackground lighten",
+
+          EditViewButtonBackground: "alias:lightPrimary",
+          EditViewButtonBackgroundHover: "alias:lightEditViewButtonBackground lighten",
+          EditViewButtonText: "alias:lightEditViewButtonBackground inverse",
+          EditViewButtonTextHover: "alias:lightEditViewButtonText opacity:0.8",
+          EditViewButtonFocusRing: "alias:lightEditViewButtonBackground",
+          EditViewButtonBorder: "alias:lightEditViewButtonBackground darken",
+
           EditViewSaveButtonText: "#DC2626",
           EditViewSaveButtonTextHover: "#B91C1C",
-          EditViewSaveButtonFocusRing: "alias:lightEditViewCancelButtonBackground",
-          EditViewSaveButtonBorder: "alias:lightEditViewCancelButtonBackground darken",
 
         },
         dark: {
@@ -596,34 +588,26 @@ export const admin = new AdminForth({
           ToastCloseIconBackgroundHover: "alias:darkToastCloseIcon lighten",
           ToastCloseIconFocusRing: "alias:darkToastCloseIcon",
           ToastText: "alias:darkPrimary inverse",
+////////////////////////////////////////////////////////////////////////////////////////////////////////
+          CreateViewButtonBackground: "alias:darkPrimary",
+          CreateViewButtonBackgroundHover: "alias:darkCreateViewButtonBackground lighten",
+          CreateViewButtonText: "alias:darkCreateViewButtonBackground inverse",
+          CreateViewButtonTextHover: "alias:darkCreateViewButtonText opacity:0.8",
+          CreateViewButtonFocusRing: "alias:darkCreateViewButtonBackground",
+          CreateViewButtonBorder: "alias:darkCreateViewButtonBackground darken",
 
-          CreateViewCancelButtonBackground: "alias:darkPrimary",
-          CreateViewCancelButtonBackgroundHover: "alias:darkCreateViewCancelButtonBackground lighten",
-          CreateViewCancelButtonText: "alias:darkCreateViewCancelButtonBackground inverse",
-          CreateViewCancelButtonTextHover: "alias:darkCreateViewCancelButtonText opacity:0.8",
-          CreateViewCancelButtonFocusRing: "alias:darkCreateViewCancelButtonBackground",
-          CreateViewCancelButtonBorder: "alias:darkCreateViewCancelButtonBackground darken",
-
-          CreateViewSaveButtonBackground: "alias:darkPrimary",
-          CreateViewSaveButtonBackgroundHover: "alias:darkCreateViewCancelButtonBackground lighten",
           CreateViewSaveButtonText: "#F87171",
           CreateViewSaveButtonTextHover: "#FFFFFF",
-          CreateViewSaveButtonFocusRing: "alias:darkCreateViewCancelButtonBackground",
-          CreateViewSaveButtonBorder: "alias:darkCreateViewCancelButtonBackground darken",
-
-          EditViewCancelButtonBackground: "alias:darkPrimary",
-          EditViewCancelButtonBackgroundHover: "alias:darkEditViewCancelButtonBackground lighten",
-          EditViewCancelButtonText: "alias:darkEditViewCancelButtonBackground inverse",
-          EditViewCancelButtonTextHover: "alias:darkEditViewCancelButtonText opacity:0.8",
-          EditViewCancelButtonFocusRing: "alias:darkEditViewCancelButtonBackground",
-          EditViewCancelButtonBorder: "alias:darkEditViewCancelButtonBackground darken",
-
-          EditViewSaveButtonBackground: "alias:darkPrimary",
-          EditViewSaveButtonBackgroundHover: "alias:darkEditViewCancelButtonBackground lighten",
+
+          EditViewButtonBackground: "alias:darkPrimary",
+          EditViewButtonBackgroundHover: "alias:darkEditViewButtonBackground lighten",
+          EditViewButtonText: "alias:darkEditViewButtonBackground inverse",
+          EditViewButtonTextHover: "alias:darkEditViewButtonText opacity:0.8",
+          EditViewButtonFocusRing: "alias:darkEditViewButtonBackground",
+          EditViewButtonBorder: "alias:darkEditViewButtonBackground darken",
+
           EditViewSaveButtonText: "#F87171",
           EditViewSaveButtonTextHover: "#FFFFFF",
-          EditViewSaveButtonFocusRing: "alias:darkEditViewCancelButtonBackground",
-          EditViewSaveButtonBorder: "alias:darkEditViewCancelButtonBackground darken",
 
         }
       }