adminforth 1.1.47 → 1.1.48

package/dist/modules/codeInjector.js

@@ -15,9 +15,8 @@ import fsExtra from 'fs-extra';
 import os from 'os';
 import path from 'path';
 import { promisify } from 'util';
-import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
-import { getComponentNameFromPath } from './utils.js';
-import { styles } from './styles.js';
+import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath } from './utils.js';
+import { StylesGenerator } from './styleGenerator.js';
 let TMP_DIR;
 try {
     TMP_DIR = os.tmpdir();
@@ -87,7 +86,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -299,21 +298,13 @@ class CodeInjector {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
-            // generate tailwind extend styles 
-            if ((_g = this.adminforth.config) === null || _g === void 0 ? void 0 : _g.styles) {
-                const tailwindStyles = (_h = this.adminforth.config) === null || _h === void 0 ? void 0 : _h.styles;
-                const stylesText = JSON.stringify(tailwindStyles, null, 2).slice(1, -1);
-                let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
-                let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
-                tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
-                yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
-            }
-            else {
-                let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
-                let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
-                tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', styles());
-                yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
-            }
+            // generate tailwind extend styles
+            const stylesGenerator = new StylesGenerator((_g = this.adminforth.config.customization) === null || _g === void 0 ? void 0 : _g.styles);
+            const stylesText = JSON.stringify(stylesGenerator.mergeStyles(), null, 2).slice(1, -1);
+            let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
+            let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
+            tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
+            yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
             const routerVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'router', 'index.ts');
             let routerVueContent = yield fs.promises.readFile(routerVuePath, 'utf-8');
             routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES IMPORTS */', routerComponents);
@@ -321,17 +312,17 @@ class CodeInjector {
             const indexHtmlPath = path.join(CodeInjector.SPA_TMP_PATH, 'index.html');
             let indexHtmlContent = yield fs.promises.readFile(indexHtmlPath, 'utf-8');
             indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.customization.title || 'AdminForth'}`);
-            indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH FAVICON */', ((_j = this.adminforth.config.customization.favicon) === null || _j === void 0 ? void 0 : _j.replace('@@/', `${this.adminforth.baseUrlSlashed}assets/`))
+            indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH FAVICON */', ((_h = this.adminforth.config.customization.favicon) === null || _h === void 0 ? void 0 : _h.replace('@@/', `${this.adminforth.baseUrlSlashed}assets/`))
                 ||
                     `${this.adminforth.baseUrlSlashed}assets/favicon.png`);
             yield fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
             /* generate custom routes */
             const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
             let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });
-            let childrenHomepage = (_k = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _k === void 0 ? void 0 : _k.find((mi) => mi.homepage);
+            let childrenHomepage = (_j = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _j === void 0 ? void 0 : _j.find((mi) => mi.homepage);
             let homePagePath = (homepageMenuItem === null || homepageMenuItem === void 0 ? void 0 : homepageMenuItem.path) || `/resource/${childrenHomepage === null || childrenHomepage === void 0 ? void 0 : childrenHomepage.resourceId}`;
             if (!homePagePath) {
-                homePagePath = ((_l = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _l === void 0 ? void 0 : _l.path) || `/resource/${(_m = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _m === void 0 ? void 0 : _m.resourceId}`;
+                homePagePath = ((_k = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _k === void 0 ? void 0 : _k.path) || `/resource/${(_l = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _l === void 0 ? void 0 : _l.resourceId}`;
             }
             routes += `{
       path: '/',

package/dist/modules/styleGenerator.js

@@ -0,0 +1,39 @@
+import { transformObject, deepMerge } from "./utils.js";
+import { styles } from "./styles.js";
+const aliasObject = { lightSidebarText: 'lightSidebarIcons', darkSidebarText: 'darkSidebarIcons', lightSidebarTextHover: 'lightSidebarIconsHover', darkSidebarTextHover: 'darkSidebarIconsHover' };
+export class StylesGenerator {
+    constructor(styleConfig) {
+        if (!styleConfig) {
+            console.log("No styles provided using default styles.");
+        }
+        this.styleConfig = styleConfig;
+        this.defaultStyles = styles();
+    }
+    generatePlainStyles(styleObj) {
+        let plainCustomStyles = {};
+        if (styleObj) {
+            Object.keys(styleObj).forEach((k) => {
+                plainCustomStyles[k] = transformObject(styleObj[k]);
+            });
+        }
+        return plainCustomStyles;
+    }
+    changeAliases(plateStyles) {
+        if (!plateStyles || !plateStyles.colors) {
+            return plateStyles;
+        }
+        let colors = plateStyles.colors;
+        Object.keys(aliasObject).forEach((aliasName) => {
+            if (colors[aliasObject[aliasName]])
+                return;
+            if (!colors[aliasName])
+                return;
+            colors[aliasObject[aliasName]] = colors[aliasName];
+        });
+        return plateStyles;
+    }
+    mergeStyles() {
+        let mergedStyles = deepMerge(this.defaultStyles, this.changeAliases(this.generatePlainStyles(this.styleConfig)));
+        return mergedStyles;
+    }
+}

package/dist/modules/styles.js

@@ -1,53 +1,84 @@
-export const styles = () => `
-
-  "colors": {
-    "html-bg": "#FFFFFF", // Changed to white
-    "header-bg": "#FFFFFF", // Light grey
-    "header-bg-hover": "#D3D3D3", // Light grey hover
-    "header-text": "#333333", // Dark grey text
-    "header-text-hover": "#333333", // Dark grey text hover
-    "header-icons": "#333333", // Dark grey icons
-    "header-icons-hover": "#333333", // Dark grey icons hover
-    "header-logo-color": "#333333", // Dark grey logo
-    "header-border-color": "rgb(229 231 235)", // Light grey border
-
-    "nav-menu-bg": "#ffffff", // Very light grey
-    "nav-menu-border": "rgb(229 231 235)",
-    "nav-menu-bg-hover": "rgb(243 244 246)", // Light grey hover
-    "nav-menu-bg-active": "rgb(233, 234, 236)", // Light grey active
-    "nav-menu-hover": "#rgb(209 213 219)", // Light grey hover
-    "nav-menu-active": "#CCCCCC", // Light grey active
-    "nav-menu-active-text": "#333333", // Dark grey active text
-    "nav-menu-text": "#333333", // Dark grey text
-    "nav-menu-text-hover": "#333333", // Dark grey text hover
-    "nav-menu-text-active": "#333333", // Dark grey text active
-    "nav-menu-devider": "#E0E0E0", // Light grey divider
-    "nav-menu-icons": "#333333", // Dark grey icons
-    "nav-menu-heading": "#333333", // Dark grey heading
-
-    "list-view-bg": "#FFFFFF", // White background
-    "list-view-table-bg": "#FFFFFF", // White table background
-    "list-view-table-heading": "rgb(249 250 251)", // Very light grey heading
-    "list-view-table-heading-text": "#333333", // Dark grey heading text
-    "list-view-table-text": "#333333", // Dark grey text
-    "list-view-table-row-hover": "rgb(249 250 251)", // Very light grey row hover
-    "list-view-bread-crumbs-text": "#666666", // Medium grey bread crumbs
-    "list-view-border-color": "#DDDDDD", // Light grey border
-
-    "form-view-bg": "#FFFFFF", // White form background
-    "form-view-border-color": "#F5F5F5", // Very light grey border
-    "form-view-heading": "#EDEDED" // Dark grey heading
-  },
-  "boxShadow": {
-    "custom-light": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
-    "header-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
-    "list-table-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
-    "resourse-form-shadow": "0 4px 8px rgba(0, 0, 0, 0.1)" // Lighter shadow
-  },
-  "fontSize": {
-    "header-text-size": "1rem"
-  },
-  "borderRadius": {
-    "default": "2px"
-  }
-`;
+export const styles = () => ({
+    colors: {
+        lightHtml: "#FFFFFF", // main background
+        lightNavbar: "#FFFFFF", // navbar background
+        lightNavbarHover: "#D3D3D3", // in development
+        lightNavbarText: "#333333", // in development
+        lightNavbarTextHover: "#333333", // in development
+        lightNavbarIcons: "#333333", // in development
+        lightNavbarIconsHover: "#333333", // in development
+        lightNavbarLogo: "#333333", // in development
+        lightNavbarBorder: "rgb(229 231 235)", // border
+        lightSidebar: "#ffffff", // sidebar background
+        lightSidebarBorder: "rgb(229 231 235)", // sidebar right border
+        lightSidebarHover: "rgb(243 244 246)", // in development
+        lightSidebarActive: "rgb(233, 234, 236)", // in development
+        lightSidebarItemHover: "rgb(243 244 246)", // sidebar list item hover
+        lightSidebarItemActive: "rgb(233, 234, 236)", // sidebar list item active
+        lightSidebarText: "#4b5563", // sidebar list item text
+        lightSidebarTextHover: "#333333", // sidebar list item text hover
+        lightSidebarTextActive: "#333333", // sidebar list item text active
+        lightSidebarDevider: "#E0E0E0", // sidebar devider
+        lightSidebarIcons: "#6b7280", // sidebar list item icons
+        lightSidebarIconsHover: "#333333", // sidebar list item icons hover
+        lightSidebarHeading: "#333333", // sidebar heading
+        lightList: "#FFFFFF", // list view background
+        lightListTable: "#FFFFFF", // list view table background
+        lightListTableHeading: "rgb(249 250 251)", // list view table heading
+        lightListTableHeadingText: "#333333", // list view table heading text
+        lightListTableText: "#333333", // list view table text
+        lightListTableRowHover: "rgb(249 250 251)", // list view row hover
+        lightListBreadcrumbsText: "#666666", // list view breadcrumbs text
+        lightListBorder: "#DDDDDD", // list view  rows border
+        lightForm: "#FFFFFF", // show view background
+        lightFormBorder: "#F5F5F5", // show view rows border
+        lightFormHeading: "#EDEDED", // show view heading
+        // colors for dark theme
+        darkHtml: "#111827",
+        darkNavbar: "#111827",
+        darkNavbarHover: "#444444",
+        darkNavbarText: "#FFFFFF",
+        darkNavbarTextHover: "#FFFFFF",
+        darkNavbarIcons: "#FFFFFF",
+        darkNavbarIconsHover: "#FFFFFF",
+        darkNavbarLogo: "#FFFFFF",
+        darkNavbarBorder: "#e5e7eb",
+        darkSidebar: "#1f2937",
+        darkSidebarBorder: "#374151",
+        darkSidebarHover: "#374151",
+        darkSidebarActive: "#444444",
+        darkSidebarItemHover: "#374151",
+        darkSidebarItemActive: "#52525b",
+        darkSidebarItemActiveText: "#FFFFFF",
+        darkSidebarText: "#9ca3af",
+        darkSidebarTextHover: "#FFFFFF",
+        darkSidebarTextActive: "#FFFFFF",
+        darkSidebarDevider: "#374151",
+        darkSidebarIcons: "#9ca3af",
+        darkSidebarIconsHover: "#FFFFFF",
+        darkSidebarHeading: "#FFFFFF",
+        darkList: "#111111",
+        darkListTable: "#1f2937",
+        darkListTableHeading: "#334155",
+        darkListTableHeadingText: "#9ca3af",
+        darkListTableText: "#9ca3af",
+        darkListTableRowHover: "#4b5563",
+        darkListBreadcrumbsText: "#BBBBBB",
+        darkListBorder: "#444444",
+        darkForm: "#111111",
+        darkFormBorder: "#222222",
+        darkFormHeading: "#333333"
+    },
+    boxShadow: {
+        customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+        headerShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+        listTableShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
+        resourseFormShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" // Lighter shadow
+    },
+    fontSize: {
+        "headerText-size": "1rem"
+    },
+    borderRadius: {
+        "default": "2px"
+    }
+});

package/dist/modules/utils.js

@@ -31,3 +31,47 @@ export function getComponentNameFromPath(filePath) {
 export function listify(param) {
     return param || [];
 }
+export function deepMerge(target, source) {
+    if (typeof target !== 'object' || target === null) {
+        return source;
+    }
+    for (let key in source) {
+        if (source.hasOwnProperty(key)) {
+            if (typeof source[key] === 'object' && source[key] !== null) {
+                if (!target[key]) {
+                    target[key] = {};
+                }
+                deepMerge(target[key], source[key]);
+            }
+            else {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function toCamelCase(str) {
+    return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
+}
+export function transformObject(obj, parentKey = '', result = {}) {
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            const camelCaseKey = toCamelCase(parentKey ? `${parentKey}_${key}` : key);
+            if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+                transformObject(obj[key], camelCaseKey, result);
+            }
+            else {
+                result[camelCaseKey] = obj[key];
+            }
+        }
+    }
+    //remove 'Default' from keys
+    for (const key in result) {
+        if (key.includes('Main')) {
+            const newKey = key.replace('Main', '');
+            result[newKey] = result[key];
+            delete result[key];
+        }
+    }
+    return result;
+}

package/dist/plugins/AccessControl/index.js

@@ -0,0 +1,66 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { AllowedActionsEnum } from "../../types/AdminForthConfig.js";
+import AdminForthPlugin from "../base.js";
+class AccessControlPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        super.modifyResourceConfig(adminforth, resourceConfig);
+        this.adminforth = adminforth;
+        if (!resourceConfig.hooks) {
+            resourceConfig.hooks = {};
+        }
+        const checkAccess = (adminUser, action, meta) => __awaiter(this, void 0, void 0, function* () {
+            const hasAccessOrError = yield this.options.hasAccess(adminUser, action, meta);
+            if (hasAccessOrError === true) {
+                return { ok: true };
+            }
+            else {
+                return { ok: false, error: hasAccessOrError || AccessControlPlugin.defaultError };
+            }
+        });
+        const bindHookCheck = (action, hookName) => {
+            if (!resourceConfig.hooks[action]) {
+                resourceConfig.hooks[action] = {};
+            }
+            if (!resourceConfig.hooks[action][hookName]) {
+                resourceConfig.hooks[action][hookName] = [];
+            }
+            if (hookName === 'beforeDatasourceRequest') {
+                resourceConfig.hooks[action][hookName].unshift((_a) => __awaiter(this, [_a], void 0, function* ({ adminUser, query }) {
+                    return checkAccess(adminUser, action, { query });
+                }));
+            }
+            else {
+                resourceConfig.hooks[action][hookName].unshift((_b) => __awaiter(this, [_b], void 0, function* ({ adminUser, record }) {
+                    return checkAccess(adminUser, action, { record });
+                }));
+            }
+        };
+        // List check
+        bindHookCheck(AllowedActionsEnum.list, 'beforeDatasourceRequest');
+        // Show check
+        bindHookCheck(AllowedActionsEnum.show, 'beforeDatasourceRequest');
+        // Edit check
+        bindHookCheck(AllowedActionsEnum.edit, 'beforeDatasourceRequest');
+        // create check
+        bindHookCheck(AllowedActionsEnum.create, 'beforeSave');
+        // edit check
+        bindHookCheck(AllowedActionsEnum.edit, 'beforeSave');
+        // delete check
+        bindHookCheck(AllowedActionsEnum.delete, 'beforeSave');
+        console.log('resourceConfig', resourceConfig);
+    }
+}
+AccessControlPlugin.defaultError = 'Sorry, you do not have access to this resource.';
+export default AccessControlPlugin;

package/dist/plugins/AccessControl/types.js

@@ -0,0 +1 @@
+export {};

package/dist/spa/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/* IMPORTANT:ADMINFORTH FAVICON */">
+    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>/* IMPORTANT:ADMINFORTH TITLE */</title>
+    <title>Vite App</title>
 <!--     
     <script>
       // On page load or when changing themes, best to add inline in `head` to avoid FOUC

package/dist/spa/package-lock.json

@@ -17,7 +17,6 @@
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "unhead": "^1.9.12",
-        "uuid": "^10.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -37,7 +36,7 @@
         "sass": "^1.77.2",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
-        "vite": "^5.2.13",
+        "vite": "^5.2.12",
         "vue-tsc": "^2.0.11"
       }
     },
@@ -4033,22 +4032,10 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
-    "node_modules/uuid": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/vite": {
-      "version": "5.2.13",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
-      "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
+      "version": "5.2.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
+      "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",

package/dist/spa/package.json

@@ -21,7 +21,6 @@
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "unhead": "^1.9.12",
-    "uuid": "^10.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"
@@ -41,7 +40,7 @@
     "sass": "^1.77.2",
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
-    "vite": "^5.2.13",
+    "vite": "^5.2.12",
     "vue-tsc": "^2.0.11"
   }
 }

package/dist/spa/spa/index.html

@@ -17,7 +17,7 @@
 
   </head>
   <body class=" ">
-    <div id="app" class="min-h-screen bg-html-bg dark:bg-gray-800"></div>
+    <div id="app" class="min-h-screen bg-lightHtml dark:bg-darkHtml"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/dist/spa/spa/src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <nav 
     v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
-    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
+    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
           <button @click="sideBarOpen = !sideBarOpen"
-           type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
+           type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-lightSidebarItemHover focus:outline-none focus:ring-2 focus:ring-lightSidebarDevider dark:text-darkSidebarIcons dark:hover:bg-darkSidebarHover dark:focus:ring-lightSidebarDevider">
               <span class="sr-only">Open sidebar</span>
               <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
@@ -17,25 +17,25 @@
         <div class="flex items-center">
           <div class="flex items-center ms-3 ">
             <div>
-              <button type="button" class="flex text-sm bg-header-bg-hover rounded-full focus:ring-4 focus:ring-nav-menu-devider dark:focus:ring-nav-menu-devider dark:bg-header-bg-hover" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+              <button type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                 <span class="sr-only">Open user menu</span>
-                <svg class="w-8 h-8 text-nav-menu-icons dark:text-header-icons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <svg class="w-8 h-8 text-lightSidebarIcons dark:text-darkSidebarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                   <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
                 </svg>
               </button>
             </div>
-            <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-nav-menu-bg dark:divide-nav-menu-devider dark:shadow-black" id="dropdown-user">
+            <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-darkSidebar dark:divide-darkSidebarDevider dark:shadow-black" id="dropdown-user">
               <div class="px-4 py-3" role="none">
-                <p class="text-sm text-gray-900 dark:text-header-text" role="none" v-if="coreStore.userFullname">
+                <p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
                   {{ coreStore.userFullname }}
                 </p>
-                <p class="text-sm font-medium text-gray-900 truncate dark:text-nav-menu-text" role="none">
+                <p class="text-sm font-medium text-gray-900 truncate dark:text-darkSidebarText" role="none">
                   {{ coreStore.username }}
                 </p>
               </div>
               <ul class="py-1" role="none">
                 <li>
-                  <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active" role="menuitem">
+                  <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
                     {{ theme === 'dark' ? 'Light' : 'Dark' }}
                     <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
                     <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
@@ -43,7 +43,7 @@
                   </span>
                 </li>
                 <li>
-                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active w-full" role="menuitem">Sign out</button>
+                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">Sign out</button>
                 </li>
               </ul>
             </div>
@@ -59,30 +59,30 @@
 
     v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
-    id="logo-sidebar" class="fixed border-none top-0 left-0 z-20 w-64 h-screen  transition-transform bg-nav-menu-bg border-r border-nav-menu-border  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
+    id="logo-lightSidebar" class="fixed bg-lightSidebar border-none top-0 left-0 z-20 w-64 h-screen  transition-transform bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder  sm:translate-x-0 dark:bg-darkSidebar dark:border-darkSidebarBorder" 
     :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
     aria-label="Sidebar"
   >
-    <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800 border-r">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r dark:border-darkSidebarBorder">
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
-        <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+        <span class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkNavbarText text-lightNavbarLogo">
           {{ coreStore.config?.brandName }}
         </span>
       </div>
 
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
+            <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
             <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
             ">{{ item.label }}</div>
-            <li v-else-if="item.children">
-              <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
+            <li v-else-if="item.children" class="  ">
+              <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
+                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75   dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                 <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">

package/dist/spa/spa/src/components/MenuLink.vue

@@ -1,16 +1,16 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex items-center py-2 text-nav-menu-text rounded-default  hover:bg-nav-menu-bg-hover active:bg-nav-menu-bg-active" role="menuitem"
+      class="flex group items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default  hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover" role="menuitem"
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-nav-menu-bg-active dark:bg-gray-700': item.resourceId ?
+        'bg-sidebarActive dark:bg-gray-700': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"
   >
-    <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+    <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="ms-3">{{ item.label }}</span>
   </RouterLink>
 </template>

package/dist/spa/spa/src/components/ResourceForm.vue

@@ -2,11 +2,11 @@
   <div class="rounded-default">
     
     <div 
-      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black rounded-default"
+      class="relative shadow-resourseFormShadow sm:rounded-lg dark:shadow-2xl dark:shadow-black rounded-default"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field
@@ -18,7 +18,7 @@
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
-                  class="bg-form-view-bg dark:bg-gray-800 border-b dark:border-gray-700"
+                  class="bg-ligftForm dark:bg-gray-800 border-b dark:border-gray-700"
               >
                 <!-- if column is in customComponentsPerColumn, use this component. If not, use this code -->
                 <template v-if="column?.components?.[props.source].file">