@flusys/ng-layout 1.0.0-rc → 1.0.0

package/README.md

@@ -708,5 +708,5 @@ Layout automatically handles responsive behavior. Ensure you're using the `AppLa
 
 ---
 
-**Last Updated:** 2026-02-18
+**Last Updated:** 2026-02-21
 **Angular Version:** 21

package/fesm2022/flusys-ng-layout.mjs

@@ -1,6 +1,10 @@
-import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, ChangeDetectionStrategy, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import * as i2$2 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
@@ -11,10 +15,6 @@ import Lara from '@primeuix/themes/lara';
 import Nora from '@primeuix/themes/nora';
 import * as i2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
-import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/styleclass';
@@ -202,80 +202,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-/**
- * Service managing layout configuration and state.
- * Provides signals for reactive layout updates.
- */
+/** Layout configuration and state management service */
 class LayoutService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     persistence = inject(LayoutPersistenceService);
     appConfig = inject(APP_CONFIG, { optional: true });
-    defaultConfig = {
+    DEFAULT_CONFIG = {
         preset: 'Aura',
         primary: 'emerald',
         surface: null,
         darkTheme: false,
         menuMode: 'static',
     };
-    // Load persisted config merged with defaults
-    initialConfig = (() => {
-        const persisted = this.persistence.load();
-        return persisted
-            ? { ...this.defaultConfig, ...persisted }
-            : this.defaultConfig;
-    })();
-    defaultState = {
+    DEFAULT_STATE = {
         staticMenuDesktopInactive: false,
         overlayMenuActive: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
     };
-    // Private writable signals with public readonly accessors
-    _layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
-    _layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
+    _layoutConfig = signal({
+        ...this.DEFAULT_CONFIG,
+        ...this.persistence.load(),
+    }, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
+    _layoutState = signal(this.DEFAULT_STATE, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
     _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
     layoutConfig = this._layoutConfig.asReadonly();
     layoutState = this._layoutState.asReadonly();
     transitionComplete = this._transitionComplete.asReadonly();
-    // User Profile Signals (private writable, public readonly)
     _userProfile = signal(null, ...(ngDevMode ? [{ debugName: "_userProfile" }] : []));
     _companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "_companyProfile" }] : []));
-    _appName = signal(this.appConfig?.appName ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "_appName" }] : []));
-    userProfile = this._userProfile.asReadonly();
-    companyProfile = this._companyProfile.asReadonly();
-    appName = this._appName.asReadonly();
-    // Author/Brand Signals (private writable, public readonly)
-    _authorName = signal(this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name, ...(ngDevMode ? [{ debugName: "_authorName" }] : []));
-    _authorUrl = signal(this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url, ...(ngDevMode ? [{ debugName: "_authorUrl" }] : []));
-    authorName = this._authorName.asReadonly();
-    authorUrl = this._authorUrl.asReadonly();
-    // App Launcher Signals
-    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
-    /**
-     * Filtered launcher apps based on user permissions.
-     * Automatically recomputes when raw apps or permissions change.
-     */
-    apps = computed(() => {
-        const raw = this._rawApps();
-        const permission = this.permissionValidator.permissions();
-        return filterAppsByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "apps" }] : []));
-    // Menu Signals
     _rawMenu = signal([], ...(ngDevMode ? [{ debugName: "_rawMenu" }] : []));
+    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
     permissionValidator = inject(PermissionValidatorService);
-    /**
-     * Filtered menu items based on user permissions.
-     * Automatically recomputes when raw menu or permission checker changes.
-     * Role checker is optional - if not set, role-based permissions will be denied.
-     */
-    menu = computed(() => {
-        const raw = this._rawMenu(); // Track permission changes
-        const permission = this.permissionValidator.permissions();
-        return filterMenuByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    userProfile = this._userProfile.asReadonly();
+    companyProfile = this._companyProfile.asReadonly();
+    // Static app info from config
+    appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+    authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
+    authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
+    // Permission-filtered menu and apps
+    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "apps" }] : []));
+    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
     // Computed signals - Layout
     isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
         this._layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
@@ -283,21 +254,17 @@ class LayoutService {
     getPrimary = computed(() => this._layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
     getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
-    // Computed signals - User Profile
+    // User profile computed signals
     userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
-    companyName = computed(() => {
-        // If company feature is disabled, always show app name
-        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig)) {
-            return this._appName();
-        }
-        return this._companyProfile()?.name ?? this._appName();
-    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
     isAuthenticated = computed(() => !!this._userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
-    // Computed signals - App Launcher
-    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
+    companyName = computed(() => {
+        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
+            return this.appName;
+        return this._companyProfile()?.name ?? this.appName;
+    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     // RxJS Subjects for event communication
     configUpdate = new Subject();
     overlayOpen = new Subject();
@@ -311,80 +278,55 @@ class LayoutService {
     constructor() {
         effect(() => {
             const config = this._layoutConfig();
-            if (config) {
-                this.onConfigUpdate();
-            }
-        });
-        effect(() => {
-            const config = this._layoutConfig();
-            if (!this.initialized || !config) {
-                this.initialized = true;
-                return;
-            }
-            this.handleDarkModeTransition(config);
-        });
-        // Auto-save configuration changes to localStorage
-        effect(() => {
-            const config = this._layoutConfig();
-            if (config && this.initialized) {
+            this.configUpdate.next(config);
+            if (this.initialized) {
+                this.handleDarkModeTransition(config);
                 this.persistence.save(config);
             }
+            this.initialized = true;
         });
     }
+    toggleDarkMode(config) {
+        const isDark = (config ?? this._layoutConfig()).darkTheme;
+        this.document.documentElement.classList.toggle('app-dark', isDark);
+    }
     handleDarkModeTransition(config) {
         const doc = this.document;
-        // Check for View Transitions API support (not all browsers support it)
         if ('startViewTransition' in doc && typeof doc.startViewTransition === 'function') {
-            this.startViewTransition(config, doc);
+            doc
+                .startViewTransition(() => this.toggleDarkMode(config))
+                .ready.then(() => this.onTransitionEnd())
+                .catch(() => { });
         }
         else {
             this.toggleDarkMode(config);
             this.onTransitionEnd();
         }
     }
-    startViewTransition(config, doc) {
-        const transition = doc.startViewTransition(() => {
-            this.toggleDarkMode(config);
-        });
-        transition.ready.then(() => this.onTransitionEnd()).catch(() => { });
-    }
-    toggleDarkMode(config) {
-        const _config = config || this._layoutConfig();
-        if (_config.darkTheme) {
-            this.document.documentElement.classList.add('app-dark');
-        }
-        else {
-            this.document.documentElement.classList.remove('app-dark');
-        }
-    }
     onTransitionEnd() {
         this._transitionComplete.set(true);
         setTimeout(() => this._transitionComplete.set(false));
     }
     onMenuToggle() {
+        const state = this._layoutState();
         if (this.isOverlay()) {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                overlayMenuActive: !this._layoutState().overlayMenuActive,
-            }));
-            if (this._layoutState().overlayMenuActive) {
+            const newOverlayActive = !state.overlayMenuActive;
+            this._layoutState.update((prev) => ({ ...prev, overlayMenuActive: newOverlayActive }));
+            if (newOverlayActive)
                 this.overlayOpen.next();
-            }
+            return;
         }
         if (this.isDesktop()) {
             this._layoutState.update((prev) => ({
                 ...prev,
-                staticMenuDesktopInactive: !this._layoutState().staticMenuDesktopInactive,
+                staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
             }));
         }
         else {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                staticMenuMobileActive: !this._layoutState().staticMenuMobileActive,
-            }));
-            if (this._layoutState().staticMenuMobileActive) {
+            const newMobileActive = !state.staticMenuMobileActive;
+            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
+            if (newMobileActive)
                 this.overlayOpen.next();
-            }
         }
     }
     isDesktop() {
@@ -393,82 +335,36 @@ class LayoutService {
     isMobile() {
         return !this.isDesktop();
     }
-    onConfigUpdate() {
-        this.configUpdate.next(this._layoutConfig());
-    }
     onMenuStateChange(event) {
         this.menuSource.next(event);
     }
     reset() {
         this.resetSource.next(true);
     }
-    // ==========================================================================
-    // Layout Config Methods
-    // ==========================================================================
-    /**
-     * Update layout configuration.
-     * Called by configurator component.
-     */
+    // Config & state updates
     updateLayoutConfig(config) {
         this._layoutConfig.update((prev) => ({ ...prev, ...config }));
     }
-    /**
-     * Update layout state.
-     * Called internally and by layout components.
-     */
     updateLayoutState(state) {
         this._layoutState.update((prev) => ({ ...prev, ...state }));
     }
-    // ==========================================================================
-    // User Profile Methods
-    // ==========================================================================
-    /**
-     * Set the current user profile for display in layout.
-     * Called by auth integration to sync user data.
-     */
+    // Profile setters
     setUserProfile(profile) {
         this._userProfile.set(profile);
     }
-    /**
-     * Set the current company profile for display in layout.
-     * Called by auth integration to sync company data.
-     */
     setCompanyProfile(profile) {
         this._companyProfile.set(profile);
     }
-    // ==========================================================================
-    // Menu Methods
-    // ==========================================================================
-    /**
-     * Set the raw menu items (unfiltered).
-     * Menu will be automatically filtered based on permission checker.
-     * Called by app initialization to set menu from IAM or other source.
-     */
+    // Menu & apps
     setMenu(items) {
         this._rawMenu.set(items);
     }
-    /**
-     * Clear menu and permission/role checkers.
-     * Called on logout.
-     */
     clearMenu() {
         this._rawMenu.set([]);
     }
-    // ==========================================================================
-    // App Launcher Methods
-    // ==========================================================================
-    /**
-     * Set launcher apps for display in header.
-     * Apps will be automatically filtered based on user permissions.
-     * If empty after filtering, the app launcher button is hidden.
-     */
     setApps(apps) {
         this._rawApps.set(apps);
     }
-    /**
-     * Clear launcher apps.
-     * Called on logout.
-     */
     clearApps() {
         this._rawApps.set([]);
     }
@@ -477,10 +373,32 @@ class LayoutService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class AppFooter {
+    layoutService = inject(LayoutService);
+    // Footer shows product branding (appName), not user's company
+    appName = this.layoutService.appName;
+    authorName = this.layoutService.authorName;
+    authorUrl = this.layoutService.authorUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'app-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const presets = {
     Aura,
@@ -913,7 +831,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, FormsModule, SelectButtonModule],
                     template: `
@@ -1013,7 +930,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-floating-configurator',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonModule, StyleClassModule, AppConfigurator],
                     template: `
@@ -1028,31 +944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-class AppFooter {
-    layoutService = inject(LayoutService);
-    // Footer shows product branding (appName), not user's company
-    appName = this.layoutService.appName;
-    authorName = this.layoutService.authorName;
-    authorUrl = this.layoutService.authorUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'app-footer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`,
-                }]
-        }] });
-
 const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
 const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 
@@ -1270,7 +1161,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
                     host: { class: 'relative' },
@@ -1426,7 +1316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [StyleClassModule, IconComponent],
                     host: { class: 'relative' },
@@ -1622,7 +1511,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule],
                     host: { class: 'relative' },
@@ -1804,7 +1692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule,
@@ -2042,7 +1929,7 @@ class AppMenuitem {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
+            args: [{ selector: '[app-menuitem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -2134,7 +2021,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-menu',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenuitem, RouterModule],
                     template: `<div class="layout-menu">
@@ -2163,7 +2049,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-sidebar',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
@@ -2257,7 +2142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
@@ -2276,42 +2160,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const GreenTheme = definePreset(Material, {
+const NavyBlueTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#01712c',
-                    inverseColor: '#119744',
-                    hoverColor: '#119744',
-                    activeColor: '#119744',
+                    color: '#3535cd',
+                    inverseColor: '#0707a9',
+                    hoverColor: '#0707a9',
+                    activeColor: '#0707a9',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#01712c',
-                    focusColor: '#01712c',
+                    color: '#3535cd',
+                    focusColor: '#3535cd',
                 },
             },
         },
     },
 });
 
-const NavyBlueTheme = definePreset(Material, {
+const GreenTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#3535cd',
-                    inverseColor: '#0707a9',
-                    hoverColor: '#0707a9',
-                    activeColor: '#0707a9',
+                    color: '#01712c',
+                    inverseColor: '#119744',
+                    hoverColor: '#119744',
+                    activeColor: '#119744',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#3535cd',
-                    focusColor: '#3535cd',
+                    color: '#01712c',
+                    focusColor: '#01712c',
                 },
             },
         },