@melodicdev/components 1.4.0 → 1.5.1

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/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.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.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"}