@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/pages/auth/auth-layout.styles.js

@@ -6,6 +6,54 @@ export const authLayoutCss = `
 		display: block;
 		width: 100%;
 		height: 100%;
+
+		/* Background */
+		--ml-auth-bg: var(--ml-color-surface-secondary);
+
+		/* Font */
+		--ml-auth-font-family: var(--ml-font-sans);
+
+		/* Card */
+		--ml-auth-card-max-width: 440px;
+		--ml-auth-card-bg: var(--ml-color-surface);
+		--ml-auth-card-border-width: var(--ml-border);
+		--ml-auth-card-border-color: var(--ml-color-border);
+		--ml-auth-card-radius: var(--ml-radius-xl);
+		--ml-auth-card-shadow: var(--ml-shadow-lg);
+		--ml-auth-card-padding: var(--ml-space-10);
+
+		/* Centered variant */
+		--ml-auth-centered-padding: var(--ml-space-6);
+
+		/* Split variant */
+		--ml-auth-split-padding: var(--ml-space-10);
+		--ml-auth-split-form-bg: var(--ml-color-surface);
+		--ml-auth-split-brand-bg: var(--ml-color-primary);
+		--ml-auth-split-brand-color: var(--ml-color-text-inverse);
+		--ml-auth-split-brand-max-width: 480px;
+
+		/* Logo */
+		--ml-auth-logo-margin: var(--ml-space-6);
+
+		/* Header */
+		--ml-auth-header-margin: var(--ml-space-8);
+		--ml-auth-title-size: var(--ml-text-2xl);
+		--ml-auth-title-weight: var(--ml-font-bold);
+		--ml-auth-title-color: var(--ml-color-text);
+		--ml-auth-title-line-height: var(--ml-leading-tight);
+		--ml-auth-title-margin: var(--ml-space-2);
+		--ml-auth-description-size: var(--ml-text-sm);
+		--ml-auth-description-color: var(--ml-color-text-muted);
+		--ml-auth-description-line-height: var(--ml-leading-normal);
+
+		/* Form / Social / Footer spacing */
+		--ml-auth-form-margin: var(--ml-space-6);
+		--ml-auth-social-margin: var(--ml-space-6);
+		--ml-auth-footer-size: var(--ml-text-sm);
+		--ml-auth-footer-color: var(--ml-color-text-muted);
+
+		/* Mobile */
+		--ml-auth-mobile-padding: var(--ml-space-6);
 	}
 
 	/* ============================================
@@ -15,8 +63,8 @@ export const authLayoutCss = `
 		display: flex;
 		min-height: 100%;
 		height: 100%;
-		font-family: var(--ml-font-sans);
-		background-color: var(--ml-color-surface-secondary);
+		font-family: var(--ml-auth-font-family);
+		background-color: var(--ml-auth-bg);
 	}
 
 	/* ============================================
@@ -25,17 +73,17 @@ export const authLayoutCss = `
 	.ml-auth--centered {
 		align-items: center;
 		justify-content: center;
-		padding: var(--ml-space-6);
+		padding: var(--ml-auth-centered-padding);
 	}
 
 	.ml-auth--centered .ml-auth__card {
 		width: 100%;
-		max-width: 440px;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-xl);
-		box-shadow: var(--ml-shadow-lg);
-		padding: var(--ml-space-10);
+		max-width: var(--ml-auth-card-max-width);
+		background-color: var(--ml-auth-card-bg);
+		border: var(--ml-auth-card-border-width) solid var(--ml-auth-card-border-color);
+		border-radius: var(--ml-auth-card-radius);
+		box-shadow: var(--ml-auth-card-shadow);
+		padding: var(--ml-auth-card-padding);
 	}
 
 	/* ============================================
@@ -50,13 +98,13 @@ export const authLayoutCss = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-space-10);
-		background-color: var(--ml-color-surface);
+		padding: var(--ml-auth-split-padding);
+		background-color: var(--ml-auth-split-form-bg);
 	}
 
 	.ml-auth--split .ml-auth__card {
 		width: 100%;
-		max-width: 440px;
+		max-width: var(--ml-auth-card-max-width);
 	}
 
 	.ml-auth--split .ml-auth__brand-side {
@@ -64,9 +112,9 @@ export const authLayoutCss = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-space-10);
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		padding: var(--ml-auth-split-padding);
+		background-color: var(--ml-auth-split-brand-bg);
+		color: var(--ml-auth-split-brand-color);
 		position: relative;
 		overflow: hidden;
 	}
@@ -75,7 +123,7 @@ export const authLayoutCss = `
 		position: relative;
 		z-index: 1;
 		text-align: center;
-		max-width: 480px;
+		max-width: var(--ml-auth-split-brand-max-width);
 	}
 
 	.ml-auth__brand-content ::slotted(*) {
@@ -88,7 +136,7 @@ export const authLayoutCss = `
 	.ml-auth__logo {
 		display: flex;
 		justify-content: center;
-		margin-bottom: var(--ml-space-6);
+		margin-bottom: var(--ml-auth-logo-margin);
 	}
 
 	.ml-auth__logo:empty {
@@ -100,29 +148,29 @@ export const authLayoutCss = `
 	   ============================================ */
 	.ml-auth__header {
 		text-align: center;
-		margin-bottom: var(--ml-space-8);
+		margin-bottom: var(--ml-auth-header-margin);
 	}
 
 	.ml-auth__title {
-		margin: 0 0 var(--ml-space-2) 0;
-		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-bold);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
+		margin: 0 0 var(--ml-auth-title-margin) 0;
+		font-size: var(--ml-auth-title-size);
+		font-weight: var(--ml-auth-title-weight);
+		color: var(--ml-auth-title-color);
+		line-height: var(--ml-auth-title-line-height);
 	}
 
 	.ml-auth__description {
 		margin: 0;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-normal);
+		font-size: var(--ml-auth-description-size);
+		color: var(--ml-auth-description-color);
+		line-height: var(--ml-auth-description-line-height);
 	}
 
 	/* ============================================
 	   FORM AREA
 	   ============================================ */
 	.ml-auth__form {
-		margin-bottom: var(--ml-space-6);
+		margin-bottom: var(--ml-auth-form-margin);
 	}
 
 	.ml-auth__form:empty {
@@ -133,7 +181,7 @@ export const authLayoutCss = `
 	   SOCIAL LOGIN
 	   ============================================ */
 	.ml-auth__social {
-		margin-bottom: var(--ml-space-6);
+		margin-bottom: var(--ml-auth-social-margin);
 	}
 
 	.ml-auth__social:empty {
@@ -145,8 +193,8 @@ export const authLayoutCss = `
 	   ============================================ */
 	.ml-auth__footer {
 		text-align: center;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-auth-footer-size);
+		color: var(--ml-auth-footer-color);
 	}
 
 	.ml-auth__footer:empty {
@@ -167,7 +215,7 @@ export const authLayoutCss = `
 
 		.ml-auth--split .ml-auth__form-side {
 			min-height: 100%;
-			padding: var(--ml-space-6);
+			padding: var(--ml-auth-mobile-padding);
 		}
 	}
 `;

package/lib/components/pages/auth/login-page.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"login-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/login-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAMa,kBAAmB,YAAW,WAAW;IACrD,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,OAAO,EAAE,UAAU,GAAG,OAAO,CAAc;IAE3C,iBAAiB;IACjB,KAAK,SAA4B;IAEjC,uBAAuB;IACvB,WAAW,SAA8C;IAEzD,uCAAuC;IACvC,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,sCAAsC;IACtC,IAAI,YAAY,IAAI,OAAO,CAE1B;CACD"}
+{"version":3,"file":"login-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/login-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAMa,kBAAmB,YAAW,WAAW;IAC9C,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,OAAO,EAAE,UAAU,GAAG,OAAO,CAAc;IAElD,iBAAiB;IACV,KAAK,SAA4B;IAExC,uBAAuB;IAChB,WAAW,SAA8C;IAEhE,uCAAuC;IACvC,IAAW,aAAa,IAAI,OAAO,CAElC;IAED,sCAAsC;IACtC,IAAW,YAAY,IAAI,OAAO,CAEjC;CACD"}

package/lib/components/pages/auth/signup-page.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signup-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/signup-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IACtD,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,OAAO,EAAE,UAAU,GAAG,OAAO,CAAc;IAE3C,iBAAiB;IACjB,KAAK,SAAuB;IAE5B,uBAAuB;IACvB,WAAW,SAA+B;IAE1C,uCAAuC;IACvC,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,sCAAsC;IACtC,IAAI,YAAY,IAAI,OAAO,CAE1B;CACD"}
+{"version":3,"file":"signup-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/signup-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAMa,mBAAoB,YAAW,WAAW;IAC/C,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,OAAO,EAAE,UAAU,GAAG,OAAO,CAAc;IAElD,iBAAiB;IACV,KAAK,SAAuB;IAEnC,uBAAuB;IAChB,WAAW,SAA+B;IAEjD,uCAAuC;IACvC,IAAW,aAAa,IAAI,OAAO,CAElC;IAED,sCAAsC;IACtC,IAAW,YAAY,IAAI,OAAO,CAEjC;CACD"}

package/lib/components/pages/dashboard/dashboard-page.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/dashboard/dashboard-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAMa,sBAAuB,YAAW,WAAW;IACzD,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,6BAA6B;IAC7B,MAAM,EAAE,eAAe,CAAa;IAEpC,wCAAwC;IACxC,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,sCAAsC;IACtC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,+CAA+C;IAC/C,IAAI,gBAAgB,IAAI,OAAO,CAE9B;CACD"}
+{"version":3,"file":"dashboard-page.component.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/dashboard/dashboard-page.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAMa,sBAAuB,YAAW,WAAW;IAClD,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,6BAA6B;IACtB,MAAM,EAAE,eAAe,CAAa;IAE3C,wCAAwC;IACxC,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,sCAAsC;IACtC,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,+CAA+C;IAC/C,IAAW,gBAAgB,IAAI,OAAO,CAErC;CACD"}

package/lib/components/pages/dashboard/dashboard-page.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/dashboard/dashboard-page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,iDA4F/B,CAAC"}
+{"version":3,"file":"dashboard-page.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/dashboard/dashboard-page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,iDAkH/B,CAAC"}

package/lib/components/pages/dashboard/dashboard-page.styles.js

@@ -3,14 +3,36 @@ export const dashboardPageStyles = () => css `
 	:host {
 		display: block;
 		height: 100%;
+
+		/* Font */
+		--ml-dashboard-font-family: var(--ml-font-sans);
+
+		/* Padding */
+		--ml-dashboard-padding: var(--ml-space-6);
+		--ml-dashboard-mobile-padding: var(--ml-space-4);
+
+		/* Metrics grid */
+		--ml-dashboard-metrics-min-width: 200px;
+		--ml-dashboard-metrics-gap: var(--ml-space-4);
+		--ml-dashboard-metrics-margin: var(--ml-space-6);
+		--ml-dashboard-metrics-mobile-gap: var(--ml-space-3);
+		--ml-dashboard-metrics-mobile-margin: var(--ml-space-4);
+
+		/* Body grid */
+		--ml-dashboard-body-gap: var(--ml-space-6);
+		--ml-dashboard-body-mobile-gap: var(--ml-space-4);
+
+		/* Main & aside */
+		--ml-dashboard-main-gap: var(--ml-space-6);
+		--ml-dashboard-aside-gap: var(--ml-space-6);
 	}
 
 	/* ============================================
 	   DASHBOARD CONTENT AREA
 	   ============================================ */
 	.ml-dashboard {
-		padding: var(--ml-space-6);
-		font-family: var(--ml-font-sans);
+		padding: var(--ml-dashboard-padding);
+		font-family: var(--ml-dashboard-font-family);
 	}
 
 	/* ============================================
@@ -18,9 +40,9 @@ export const dashboardPageStyles = () => css `
 	   ============================================ */
 	.ml-dashboard__metrics {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-		gap: var(--ml-space-4);
-		margin-bottom: var(--ml-space-6);
+		grid-template-columns: repeat(auto-fit, minmax(var(--ml-dashboard-metrics-min-width), 1fr));
+		gap: var(--ml-dashboard-metrics-gap);
+		margin-bottom: var(--ml-dashboard-metrics-margin);
 	}
 
 	/* ============================================
@@ -29,7 +51,7 @@ export const dashboardPageStyles = () => css `
 	.ml-dashboard__body {
 		display: grid;
 		grid-template-columns: 1fr;
-		gap: var(--ml-space-6);
+		gap: var(--ml-dashboard-body-gap);
 	}
 
 	/* Default layout: 2/3 main + 1/3 aside */
@@ -54,7 +76,7 @@ export const dashboardPageStyles = () => css `
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-6);
+		gap: var(--ml-dashboard-main-gap);
 	}
 
 	/* ============================================
@@ -64,7 +86,7 @@ export const dashboardPageStyles = () => css `
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-6);
+		gap: var(--ml-dashboard-aside-gap);
 	}
 
 	/* ============================================
@@ -78,17 +100,17 @@ export const dashboardPageStyles = () => css `
 
 	@media (max-width: 640px) {
 		.ml-dashboard {
-			padding: var(--ml-space-4);
+			padding: var(--ml-dashboard-mobile-padding);
 		}
 
 		.ml-dashboard__metrics {
 			grid-template-columns: 1fr;
-			gap: var(--ml-space-3);
-			margin-bottom: var(--ml-space-4);
+			gap: var(--ml-dashboard-metrics-mobile-gap);
+			margin-bottom: var(--ml-dashboard-metrics-mobile-margin);
 		}
 
 		.ml-dashboard__body {
-			gap: var(--ml-space-4);
+			gap: var(--ml-dashboard-body-mobile-gap);
 		}
 	}
 `;

package/lib/components/sections/app-shell/app-shell.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACzE,UAAU,EAAG,WAAW,CAAC;IAEzB,iDAAiD;IACjD,kBAAkB,EAAE,eAAe,CAAU;IAE7C,uCAAuC;IACvC,mBAAmB,UAAS;IAE5B,yCAAyC;IACzC,cAAc,UAAS;IAEvB,oDAAoD;IACpD,MAAM,UAAS;IAEf,gDAAgD;IAChD,UAAU,UAAS;IAEnB,0CAA0C;IAC1C,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;IAEpE,QAAQ,IAAI,IAAI;IAMhB,SAAS,IAAI,IAAI;IAIjB,mCAAmC;IACnC,mBAAmB,QAAO,IAAI,CAE5B;IAEF,2BAA2B;IAC3B,kBAAkB,QAAO,IAAI,CAE3B;IAEF,OAAO,CAAC,aAAa;CAOrB"}
+{"version":3,"file":"app-shell.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAClE,UAAU,EAAG,WAAW,CAAC;IAEhC,iDAAiD;IAC1C,kBAAkB,EAAE,eAAe,CAAU;IAEpD,uCAAuC;IAChC,mBAAmB,UAAS;IAEnC,yCAAyC;IAClC,cAAc,UAAS;IAE9B,oDAAoD;IAC7C,MAAM,UAAS;IAEtB,gDAAgD;IACzC,UAAU,UAAS;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;IAE7D,QAAQ,IAAI,IAAI;IAMhB,SAAS,IAAI,IAAI;IAIxB,mCAAmC;IAC5B,mBAAmB,QAAO,IAAI,CAEnC;IAEF,2BAA2B;IACpB,kBAAkB,QAAO,IAAI,CAElC;IAEF,OAAO,CAAC,aAAa;CAOrB"}

package/lib/components/sections/app-shell/app-shell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA2L1B,CAAC"}
+{"version":3,"file":"app-shell.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/app-shell/app-shell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA0N1B,CAAC"}

package/lib/components/sections/app-shell/app-shell.styles.js

@@ -3,6 +3,37 @@ export const appShellStyles = () => css `
 	:host {
 		display: block;
 		height: 100%;
+
+		/* Border */
+		--ml-app-shell-border-width: var(--ml-border);
+		--ml-app-shell-border-color: var(--ml-color-border);
+
+		/* Header */
+		--ml-app-shell-header-bg: var(--ml-color-surface);
+
+		/* Mobile sidebar */
+		--ml-app-shell-sidebar-width: var(--ml-sidebar-width, 280px);
+		--ml-app-shell-sidebar-bg: var(--ml-color-surface);
+		--ml-app-shell-sidebar-transition: var(--ml-duration-200);
+
+		/* Backdrop */
+		--ml-app-shell-backdrop-bg: rgba(0, 0, 0, 0.4);
+		--ml-app-shell-backdrop-transition: var(--ml-duration-200);
+
+		/* Menu button */
+		--ml-app-shell-menu-btn-size: 36px;
+		--ml-app-shell-menu-btn-margin: var(--ml-space-3);
+		--ml-app-shell-menu-btn-radius: var(--ml-radius);
+		--ml-app-shell-menu-btn-color: var(--ml-color-text-secondary);
+		--ml-app-shell-menu-btn-hover-bg: var(--ml-color-surface-secondary);
+		--ml-app-shell-menu-btn-hover-color: var(--ml-color-text);
+		--ml-app-shell-menu-btn-focus-color: var(--ml-color-primary);
+		--ml-app-shell-menu-btn-transition: var(--ml-duration-150);
+
+		/* Scrollbar */
+		--ml-app-shell-scrollbar-width: 6px;
+		--ml-app-shell-scrollbar-thumb-color: var(--ml-color-border);
+		--ml-app-shell-scrollbar-thumb-radius: var(--ml-radius-full);
 	}
 
 	/* ============================================
@@ -23,7 +54,7 @@ export const appShellStyles = () => css `
 
 	.ml-app-shell--sidebar-right .ml-app-shell__sidebar {
 		order: 2;
-		border-left: var(--ml-border) solid var(--ml-color-border);
+		border-left: var(--ml-app-shell-border-width) solid var(--ml-app-shell-border-color);
 		border-right: none;
 	}
 
@@ -37,7 +68,7 @@ export const appShellStyles = () => css `
 	.ml-app-shell__sidebar {
 		grid-row: 1 / -1;
 		overflow: hidden;
-		border-right: var(--ml-border) solid var(--ml-color-border);
+		border-right: var(--ml-app-shell-border-width) solid var(--ml-app-shell-border-color);
 	}
 
 	::slotted([slot="sidebar"]) {
@@ -61,8 +92,8 @@ export const appShellStyles = () => css `
 		display: flex;
 		align-items: center;
 		flex-shrink: 0;
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
+		border-bottom: var(--ml-app-shell-border-width) solid var(--ml-app-shell-border-color);
+		background-color: var(--ml-app-shell-header-bg);
 	}
 
 	.ml-app-shell__header:empty {
@@ -87,7 +118,7 @@ export const appShellStyles = () => css `
 
 	/* Scrollbar styling */
 	.ml-app-shell__content::-webkit-scrollbar {
-		width: 6px;
+		width: var(--ml-app-shell-scrollbar-width);
 	}
 
 	.ml-app-shell__content::-webkit-scrollbar-track {
@@ -95,8 +126,8 @@ export const appShellStyles = () => css `
 	}
 
 	.ml-app-shell__content::-webkit-scrollbar-thumb {
-		background-color: var(--ml-color-border);
-		border-radius: var(--ml-radius-full);
+		background-color: var(--ml-app-shell-scrollbar-thumb-color);
+		border-radius: var(--ml-app-shell-scrollbar-thumb-radius);
 	}
 
 	/* ============================================
@@ -107,25 +138,25 @@ export const appShellStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: 36px;
-		height: 36px;
-		margin-left: var(--ml-space-3);
+		width: var(--ml-app-shell-menu-btn-size);
+		height: var(--ml-app-shell-menu-btn-size);
+		margin-left: var(--ml-app-shell-menu-btn-margin);
 		padding: 0;
 		border: none;
-		border-radius: var(--ml-radius);
+		border-radius: var(--ml-app-shell-menu-btn-radius);
 		background: transparent;
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-app-shell-menu-btn-color);
 		cursor: pointer;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-app-shell-menu-btn-transition) var(--ml-ease-in-out);
 	}
 
 	.ml-app-shell__menu-btn:hover {
-		background-color: var(--ml-color-surface-secondary);
-		color: var(--ml-color-text);
+		background-color: var(--ml-app-shell-menu-btn-hover-bg);
+		color: var(--ml-app-shell-menu-btn-hover-color);
 	}
 
 	.ml-app-shell__menu-btn:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-app-shell-menu-btn-focus-color);
 		outline-offset: -2px;
 	}
 
@@ -150,18 +181,18 @@ export const appShellStyles = () => css `
 			left: 0;
 			bottom: 0;
 			z-index: 50;
-			width: var(--ml-sidebar-width, 280px);
+			width: var(--ml-app-shell-sidebar-width);
 			transform: translateX(-100%);
-			transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
-			border-right: var(--ml-border) solid var(--ml-color-border);
-			background-color: var(--ml-color-surface);
+			transition: transform var(--ml-app-shell-sidebar-transition) var(--ml-ease-in-out);
+			border-right: var(--ml-app-shell-border-width) solid var(--ml-app-shell-border-color);
+			background-color: var(--ml-app-shell-sidebar-bg);
 		}
 
 		.ml-app-shell--sidebar-right .ml-app-shell__sidebar {
 			left: auto;
 			right: 0;
 			transform: translateX(100%);
-			border-left: var(--ml-border) solid var(--ml-color-border);
+			border-left: var(--ml-app-shell-border-width) solid var(--ml-app-shell-border-color);
 			border-right: none;
 		}
 
@@ -175,10 +206,10 @@ export const appShellStyles = () => css `
 			position: fixed;
 			inset: 0;
 			z-index: 40;
-			background-color: rgba(0, 0, 0, 0.4);
+			background-color: var(--ml-app-shell-backdrop-bg);
 			opacity: 0;
 			pointer-events: none;
-			transition: opacity var(--ml-duration-200) var(--ml-ease-in-out);
+			transition: opacity var(--ml-app-shell-backdrop-transition) var(--ml-ease-in-out);
 		}
 
 		.ml-app-shell__backdrop--visible {

package/lib/components/sections/hero/hero-section.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero-section.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/hero/hero-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC;AACjE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAMa,oBAAqB,YAAW,WAAW;IACvD,UAAU,EAAG,WAAW,CAAC;IAEzB,qBAAqB;IACrB,OAAO,EAAE,WAAW,CAAc;IAElC,2CAA2C;IAC3C,IAAI,EAAE,QAAQ,CAAQ;IAEtB,uBAAuB;IACvB,UAAU,EAAE,cAAc,CAAU;IAEpC,gDAAgD;IAChD,KAAK,SAAM;IAEX,wDAAwD;IACxD,WAAW,SAAM;CACjB"}
+{"version":3,"file":"hero-section.component.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/hero/hero-section.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC;AACjE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAMa,oBAAqB,YAAW,WAAW;IAChD,UAAU,EAAG,WAAW,CAAC;IAEhC,qBAAqB;IACd,OAAO,EAAE,WAAW,CAAc;IAEzC,2CAA2C;IACpC,IAAI,EAAE,QAAQ,CAAQ;IAE7B,uBAAuB;IAChB,UAAU,EAAE,cAAc,CAAU;IAE3C,gDAAgD;IACzC,KAAK,SAAM;IAElB,wDAAwD;IACjD,WAAW,SAAM;CACxB"}

package/lib/components/sections/hero/hero-section.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero-section.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/hero/hero-section.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAwQ7B,CAAC"}
+{"version":3,"file":"hero-section.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/hero/hero-section.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAiU7B,CAAC"}