adminforth 1.1.59 → 1.1.61

package/dist/spa/src/views/ShowView.vue

@@ -1,38 +1,21 @@
 <template>
   <div class="relative">
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
     <BreadcrumbsWithButtons>
-      <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      <RouterLink :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
+        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconPenSolid class="w-4 h-4" />
         Edit
       </RouterLink>
 
-      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      <button  @click="deleteRecord"
+        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
       </button>
     </BreadcrumbsWithButtons>
 
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
     <div v-if="loading" role="status" class="max-w-sm animate-pulse">
         <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
         <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
@@ -46,7 +29,7 @@
       v-else
       class="relative overflow-x-auto shadow-resourse-form-shadow "
     >
-     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
+     <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">
             <tr>
                 <th scope="col" class="px-6 py-3">
@@ -58,49 +41,23 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
+            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-              <component
-                v-if="column.components?.showRow"
-                  :is="getCustomComponent(column.components.showRow)"
-                  :meta="column.components.showRow.meta"
-                  :column="column"
-                  :resource="coreStore.resource"
-                  :record="coreStore.record"
-              />
-              <template v-else>
-                <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
-                  {{ column.label }}
+                <td class="px-6 py-4 whitespace-nowrap">
+                    {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                  <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
-                    :resource="coreStore.resource"
-                    :meta="column.components.show.meta"
-                    :column="column"
-                    :record="coreStore.record"
-                  />
-                  <ValueRenderer v-else 
-                    :column="column" 
-                    :record="coreStore.record"
-                  />
+                    <component
+                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
+                        :column="column"
+                        :row="coreStore.record"
+                    />
                 </td>
-              </template>
             </tr>
+            
         </tbody>
     </table>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :column="column"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
 </div>
 
 
@@ -111,78 +68,37 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
+import { getCustomComponent } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
-import { useRoute,useRouter } from 'vue-router';
-import {callAdminForthApi} from '@/utils';
-import {showSuccesTost} from '@/composables/useFrontendApi';
+import { useRoute } from 'vue-router';
 
 
 const item = ref(null);
 const route = useRoute();
-const router = useRouter();
 const loading = ref(false);
 let showComponentsPerColumn = {};
 
-console.log(route.params,'showWiev');
-
-
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
-  await coreStore.fetchResourceFull({
+  await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
+  showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.show);
       }
       return acc;
-  }, {});
+    }, {});
   loading.value = false;
 });
 
-async function deleteRecord(row) {
-  const data = await window.adminforth.confirm({
-    message: 'Are you sure you want to delete this item?',
-    yes: 'Delete',
-    no: 'Cancel',
-  });
-  if (data) {
-    try {
-      const res = await callAdminForthApi({
-      path: '/delete_record',
-      method: 'POST',
-      body: {
-        resourceId: route.params.resourceId,
-        primaryKey: route.params.primaryKey,
-      }});
-      if (!res.error){
-        router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
-        showSuccesTost('Record deleted successfully')
-      } else {
-        console.error(res.error)
-      }
-
-    } catch (e) {
-      console.error(e);
-      };
-    }
-
-    
-}
-
 </script>

package/dist/spa/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content:  ["./src/**/*.{vue, js, ts, tsx}","./src/*.{vue, js, ts, tsx}", "./index.html", "./node_modules/flowbite/**/*.js"],
+  content:  ["./src/**/*.{vue, js}","./src/*.{vue, js}", "./index.html", "./node_modules/flowbite/**/*.js"],
   theme: {
     extend: {
       /* IMPORTANT:ADMINFORTH TAILWIND STYLES */

package/dist/spa/vite.config.ts

@@ -11,12 +11,6 @@ const customLogger = {
       console.log(msg);
     }
   },
-  warnOnce(msg: string) {
-    console.warn('warn once', msg);
-    if (!this.hasWarned) {
-      this.hasWarned = true;
-    }
-  },
   warn(msg: string) {
     console.warn(msg);
   },

package/dist/types.js

@@ -0,0 +1,30 @@
+// typical types which AdminForth supports
+//
+export const AdminForthTypes = {
+    STRING: 'string',
+    INTEGER: 'integer',
+    FLOAT: 'float',
+    DECIMAL: 'decimal',
+    BOOLEAN: 'boolean',
+    DATE: 'date',
+    DATETIME: 'datetime',
+    TIME: 'time',
+    TEXT: 'text',
+    JSON: 'json',
+};
+export const AdminForthFilterOperators = {
+    EQ: 'eq',
+    NE: 'ne',
+    GT: 'gt',
+    LT: 'lt',
+    GTE: 'gte',
+    LTE: 'lte',
+    LIKE: 'like',
+    ILIKE: 'ilike',
+    IN: 'in',
+    NIN: 'nin',
+};
+export const AdminForthSortDirections = {
+    ASC: 'asc',
+    DESC: 'desc',
+};

package/index.ts

@@ -18,7 +18,7 @@ import { AdminForthConfig, AdminForthClass, AdminForthComponentDeclaration, Admi
   AdminForthResource,
   AllowedActionsEnum,
   AllowedActions,
-  ActionCheckSource
+  ActionCheckSource,
 } from './types/AdminForthConfig.js';
 import path from 'path';
 import AdminForthPlugin from './plugins/base.js';
@@ -555,6 +555,66 @@ class AdminForth implements AdminForthClass {
     return users.data[0] || null;
   }
 
+  async createResourceRecord({ resource, record, adminUser }: { resource: AdminForthResource, record: any, adminUser: AdminUser }) {
+    for (const column of resource.columns) {
+        if (column.fillOnCreate) {
+            if (record[column.name] === undefined) {
+                record[column.name] = column.fillOnCreate({
+                    initialRecord: record, adminUser
+                 });
+            }
+        }
+        if ((column.required as {create?: boolean, edit?: boolean}) ?.create && record[column.name] === undefined) {
+            return { error: `Column '${column.name}' is required` };
+        }
+
+        if (column.isUnique) {
+            const existingRecord = await this.connectors[resource.dataSource].getData({
+                resource,
+                filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value: record[column.name] }],
+                limit: 1,
+                sort: [],
+                offset: 0
+            });
+            if (existingRecord.data.length > 0) {
+                return { error: `Record with ${column.name} ${record[column.name]} already exists` };
+            }
+        }
+    }
+
+    // execute hook if needed
+    for (const hook of listify(resource.hooks?.create?.beforeSave as BeforeSaveFunction[])) {
+        const resp = await hook({ resource, record, adminUser });
+        if (!resp || (!resp.ok && !resp.error)) {
+          throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
+        }
+
+        if (resp.error) {
+          return { error: resp.error };
+        }
+      }
+
+    // remove virtual columns from record
+    for (const column of resource.columns.filter((col) => col.virtual)) {
+        if (record[column.name]) {
+          delete record[column.name];
+        }
+    }
+    const connector = this.connectors[resource.dataSource];
+    await connector.createRecord({ resource, record });
+    // execute hook if needed
+    for (const hook of listify(resource.hooks?.create?.afterSave as AfterSaveFunction[])) {
+      const resp = await hook({ resource, record, adminUser });
+      if (!resp || (!resp.ok && !resp.error)) {
+        throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
+      }
+
+      if (resp.error) {
+        return { error: resp.error };
+      }
+    }
+}
+
   setupEndpoints(server: GenericHttpServer) {
     server.endpoint({
       noAuth: true,
@@ -1029,7 +1089,6 @@ class AdminForth implements AdminForthClass {
         return item;
       },
     });
-
     server.endpoint({
         method: 'POST',
         path: '/create_record',
@@ -1045,66 +1104,8 @@ class AdminForth implements AdminForthClass {
               return { error };
             }
 
-            const record = body['record'];
-            // execute hook if needed
-            for (const hook of listify(resource.hooks?.create?.beforeSave as BeforeSaveFunction[])) {
-              const resp = await hook({ resource, record, adminUser });
-              if (!resp || (!resp.ok && !resp.error)) {
-                throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
-              }
-
-              if (resp.error) {
-                return { error: resp.error };
-              }
-            }
-
-            
-
-            for (const column of resource.columns) {
-                if (column.fillOnCreate) {
-                    if (body['record'][column.name] === undefined) {
-                        body['record'][column.name] = column.fillOnCreate({
-                            initialRecord: body['record'], adminUser
-                         });
-                    }
-                }
-                if ((column.required as {create?: boolean, edit?: boolean}) ?.create && body['record'][column.name] === undefined) {
-                    return { error: `Column '${column.name}' is required` };
-                }
-
-                if (column.isUnique) {
-                    const existingRecord = await this.connectors[resource.dataSource].getData({
-                        resource,
-                        filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value: body['record'][column.name] }],
-                        limit: 1,
-                        sort: [],
-                        offset: 0
-                    });
-                    if (existingRecord.data.length > 0) {
-                        return { error: `Record with ${column.name} ${body['record'][column.name]} already exists` };
-                    }
-                }
-            }
-
-            // remove virtual columns from record
-            for (const column of resource.columns.filter((col) => col.virtual)) {
-                if (record[column.name]) {
-                  delete record[column.name];
-                }
-            }
+            await this.createResourceRecord({ resource, record: body['record'], adminUser });
             const connector = this.connectors[resource.dataSource];
-            await connector.createRecord({ resource, record });
-            // execute hook if needed
-            for (const hook of listify(resource.hooks?.create?.afterSave as AfterSaveFunction[])) {
-              const resp = await hook({ resource, record, adminUser });
-              if (!resp || (!resp.ok && !resp.error)) {
-                throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
-              }
-
-              if (resp.error) {
-                return { error: resp.error };
-              }
-            }
 
             return {
               newRecordId: body['record'][connector.getPrimaryKey(resource)]

package/modules/styleGenerator.ts

@@ -1,16 +1,13 @@
-import { transformObject,deepMerge } from "./utils.js";
+import { transformObject,deepMerge,createRGBA,parseColorForAliases,darkenRGBA, lightenRGBA } from "./utils.js";
 import { styles } from "./styles.js";
 
-const aliasObject ={ lightSidebarText:'lightSidebarIcons',darkSidebarText:'darkSidebarIcons',lightSidebarTextHover:'lightSidebarIconsHover',darkSidebarTextHover:'darkSidebarIconsHover'}
 
 export class StylesGenerator {
     styleConfig: any;
     defaultStyles: any;
   
     constructor(styleConfig: any) {
-      if (!styleConfig) {
-        console.log("No styles provided using default styles.");
-      }
+     
       this.styleConfig = styleConfig;
       this.defaultStyles = styles();
     }
@@ -24,22 +21,32 @@ export class StylesGenerator {
       }
       return plainCustomStyles;
     }
-    private changeAliases(plateStyles: any) {
-      if (!plateStyles || !plateStyles.colors) {
-        return plateStyles;
+   
+    private changeAlias(str:any, mergedStyles:any){
+      const {aliasMatch,opacityMatch,darkenMatch,lightenMatch} = parseColorForAliases(str);
+      if (!aliasMatch) {
+        return str;
+      } else {
+        const alias = aliasMatch[1];
+        let opacity = opacityMatch ? parseFloat(opacityMatch[1]) : 1;
+        const color = mergedStyles[alias];
+        if (darkenMatch) {
+          return darkenRGBA(createRGBA(color, opacity))
+        }
+        if  (lightenMatch){
+          return lightenRGBA(createRGBA(color, opacity))
+        }
+        return createRGBA(color, opacity);
       }
-      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)));
+      let mergedStyles = deepMerge(this.defaultStyles, this.generatePlainStyles(this.styleConfig));
+      let colors = mergedStyles.colors;
+      Object.entries(colors).forEach(([key,value])=>{
+
+        colors[key] =  this.changeAlias(value,colors)
+      })
       return mergedStyles;
     }
-  
   }

package/modules/styles.ts

@@ -5,27 +5,23 @@ export const styles = () => ({
     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
+    lightNavbarText: "#111827", // navbar text
+    lightNavbarTextHover: "alias:lightNavbarText darken", // navbar text hover
+    lightNavbarTextActive: "alias:lightNavbarText darken", // navbar text active
+    lightNavbarIcons: "alias:lightNavbarText opacity:0.7", // navbar icons
 
     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: "#f3f4f6", // 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
+    lightSidebarBorder: "alias:lightSidebarText opacity:0.3", // sidebar right border
+    lightSidebarItemHover: "alias:lightSidebarText opacity:0.1", // sidebar list item hover
+    lightSidebarItemActive: "alias:lightSidebarText opacity:0.4", // sidebar list item active
+    lightSidebarText: "#1f2937", // sidebar list item text
+    lightSidebarTextHover: "alias:lightSidebarText darken", // sidebar list item text hover
+    lightSidebarTextActive: "alias:lightSidebarText darken", // sidebar list item text active
+    lightSidebarDevider: "alias:lightSidebarText opacity:0.3", // sidebar devider
+    lightSidebarIcons: "alias:lightSidebarText opacity:0.7", // sidebar list item icons
+    lightSidebarIconsHover: "alias:lightSidebarText", // sidebar list item icons hover
+    lightSidebarHeading: "alias:lightSidebarText opacity:0.3", // sidebar heading
 
     lightList: "#FFFFFF", // list view background
     lightListTable: "#FFFFFF", // list view table background
@@ -35,10 +31,28 @@ export const styles = () => ({
     lightListTableRowHover: "rgb(249 250 251)", // list view row hover
     lightListBreadcrumbsText: "#666666", // list view breadcrumbs text
     lightListBorder: "#DDDDDD", // list view  rows border
+    // lightListButton: "#FFFFFF", // list view button
+    // lightListButtonBorder: "#d1d5db", // list view button border
+    // lightListButtonHover: "#f3f4f6", // list view button hover
+    // lightListButtonBorderHover: "#f3f4f6", // list view button border hover
+    // lightListButtonActive: "#f3f4f6", // list view button active
+    // lightListButtonDisabled: "#f3f4f6", // list view button disabled
+    // lightListButtonDisabledText: "#f3f4f6", // list view button disabled text
+    // lightListButtonIcon: "#333333", // list view button icon
 
     lightForm: "#FFFFFF", // show view background
     lightFormBorder: "#F5F5F5", // show view rows border
     lightFormHeading: "rgb(249 250 251)", // show view heading
+
+    lightButtons: "#FFFFFF", // button background
+    lightButtonsBorder: "#DDDDDD", // button border
+    lightButtonsText: "#111827", // button text
+    lightButtonsHover: "#f3f4f6", // button hover
+    lightButtonsBorderHover: "#f3f4f6", // button border hover  
+    lightButtonsActive: "#f3f4f6", // button active
+    lightButtonsDisabled: "#f3f4f6", // button disabled
+    lightButtonsDisabledText: "#f3f4f6", // button disabled text
+    lightButtonsIcon: "#333333", // button icon
     
 
 
@@ -46,28 +60,24 @@ export const styles = () => ({
     darkHtml: "#111827",
 
     darkNavbar: "#111827", 
-    darkNavbarHover: "#444444",
-    darkNavbarText: "#FFFFFF", 
-    darkNavbarTextHover: "#FFFFFF",
-    darkNavbarIcons: "#FFFFFF", 
-    darkNavbarIconsHover: "#FFFFFF",
-    darkNavbarLogo: "#FFFFFF", 
     darkNavbarBorder: "#e5e7eb",
+    darkNavbarText: "#9ca3af",
+    darkNavbarTextHover: "alias:darkNavbarText lighten",
+    darkNavbarTextActive: "alias:darkNavbarText lighten",
+    darkNavbarIcons: "alias:darkNavbarText opacity:0.7",
 
     darkSidebar: "#1f2937", 
-    darkSidebarBorder: "#374151", 
-    darkSidebarHover: "#374151", 
-    darkSidebarActive: "#444444", 
-    darkSidebarItemHover: "#374151",
-    darkSidebarItemActive: "#52525b",
-    darkSidebarItemActiveText: "#FFFFFF",
+    darkSidebarBorder: "alias:darkSidebarText opacity:0.3", 
+    darkSidebarItemHover: "alias:darkSidebarText opacity:0.1", 
+    darkSidebarItemActive: "alias:darkSidebarText opacity:0.4", 
     darkSidebarText: "#9ca3af", 
-    darkSidebarTextHover: "#FFFFFF",
-    darkSidebarTextActive: "#FFFFFF", 
-    darkSidebarDevider: "#374151", 
-    darkSidebarIcons: "#9ca3af", 
-    darkSidebarIconsHover: "#FFFFFF", 
-    darkSidebarHeading: "#FFFFFF", 
+    darkSidebarTextHover: "alias:darkSidebarText lighten", 
+    darkSidebarTextActive: "alias:darkSidebarText lighten", 
+    darkSidebarDevider: "alias:darkSidebarText opacity:0.3", 
+    darkSidebarIcons: "alias:darkSidebarText opacity:0.7", 
+    darkSidebarIconsHover: "alias:darkSidebarText", 
+    darkSidebarHeading: "alias:darkSidebarText opacity:0.3", 
+
 
     darkList: "#111111", 
     darkListTable: "#1f2937",