@gravionlabs/helix-shell 22.1.5 → 22.1.7

package/README.md

@@ -12,7 +12,7 @@ Angular application shell for [Helix](../../README.md), extending
 - 🔐 **Auth & error pages** — login, error, access-denied, not-found, with lazy route config
 - 🚀 **Landing widgets** — hero, features, highlights, pricing, footer sections
 - 📝 **Form infrastructure** — `HelixFormField`, `HelixValidators`, `helixFormErrorMap`
-- 🎨 **Helix + PrimeUIX theming** — Aura / Lara / Nora presets, dark mode via View Transitions
+- 🎨 **Helix theming** — the Helix preset (plus Aura / Lara / Nora), dark mode via View Transitions
 - 📦 **Standalone components** — no NgModule required
 
 ## Installation
@@ -30,14 +30,14 @@ npm install @gravionlabs/helix-shell
 
 ```typescript
 // app.config.ts
-import { auraPreset } from '@gravionlabs/helix-core/themes/aura';
+import { helixPreset } from '@gravionlabs/helix-core/themes/helix';
 import { provideHelix } from '@gravionlabs/helix-core/config';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes),
     provideHttpClient(),
-    provideHelix({ theme: { preset: auraPreset, options: { darkModeSelector: '.app-dark' } } })
+    provideHelix({ theme: { preset: helixPreset, options: { darkModeSelector: '.app-dark' } } })
   ]
 };
 ```

package/fesm2022/gravionlabs-helix-shell.mjs

@@ -20,6 +20,7 @@ import * as i3$1 from "@gravionlabs/helix-core/selectbutton";
 import { SelectButtonModule } from "@gravionlabs/helix-core/selectbutton";
 import { $t, updatePreset, updateSurfacePalette } from "@gravionlabs/helix-core/themes";
 import { auraPreset } from "@gravionlabs/helix-core/themes/aura";
+import { helixPreset } from "@gravionlabs/helix-core/themes/helix";
 import { laraPreset } from "@gravionlabs/helix-core/themes/lara";
 import { noraPreset } from "@gravionlabs/helix-core/themes/nora";
 import * as i2$1 from "@gravionlabs/helix-core/button";
@@ -424,8 +425,8 @@ function writeCollapsed(collapsed) {
 	} catch {}
 }
 const initialState = {
-	preset: "Aura",
-	primary: "emerald",
+	preset: "Helix",
+	primary: null,
 	surface: null,
 	darkTheme: false,
 	menuMode: "static",
@@ -1621,6 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const presets = {
+	Helix: helixPreset,
 	Aura: auraPreset,
 	Lara: laraPreset,
 	Nora: noraPreset
@@ -1817,6 +1819,7 @@ var HelixConfigurator = class HelixConfigurator {
 		if (isPlatformBrowser(this.platformId)) this.onPresetChange(this.store.preset());
 	}
 	getPresetExt() {
+		if (this.selectedPrimaryColor() === null) return {};
 		const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
 		const preset = this.store.preset();
 		if (color.name === "noir") return { semantic: {
@@ -1864,6 +1867,39 @@ var HelixConfigurator = class HelixConfigurator {
 				}
 			}
 		} };
+		else if (preset === "Helix") return { semantic: {
+			primary: color.palette,
+			colorScheme: {
+				light: {
+					primary: {
+						color: "{primary.600}",
+						contrastColor: "#ffffff",
+						hoverColor: "{primary.700}",
+						activeColor: "{primary.800}"
+					},
+					highlight: {
+						background: "{primary.50}",
+						focusBackground: "{primary.100}",
+						color: "{primary.700}",
+						focusColor: "{primary.800}"
+					}
+				},
+				dark: {
+					primary: {
+						color: "{primary.400}",
+						contrastColor: "{surface.950}",
+						hoverColor: "{primary.300}",
+						activeColor: "{primary.200}"
+					},
+					highlight: {
+						background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+						focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+						color: "rgba(255,255,255,.87)",
+						focusColor: "rgba(255,255,255,.87)"
+					}
+				}
+			}
+		} };
 		else if (preset === "Nora") return { semantic: {
 			primary: color.palette,
 			colorScheme: {