@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/sections/hero/hero-section.styles.js

@@ -3,6 +3,68 @@ export const heroSectionStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* Font */
+		--ml-hero-font-family: var(--ml-font-sans);
+
+		/* Size: sm */
+		--ml-hero-sm-padding: var(--ml-space-12) var(--ml-space-6);
+		--ml-hero-sm-title-size: var(--ml-text-3xl);
+		--ml-hero-sm-description-size: var(--ml-text-base);
+
+		/* Size: md */
+		--ml-hero-md-padding: var(--ml-space-20) var(--ml-space-6);
+		--ml-hero-md-title-size: var(--ml-text-4xl);
+		--ml-hero-md-description-size: var(--ml-text-lg);
+
+		/* Size: lg */
+		--ml-hero-lg-padding: calc(var(--ml-space-20) + var(--ml-space-10)) var(--ml-space-6);
+		--ml-hero-lg-title-size: var(--ml-text-5xl);
+		--ml-hero-lg-description-size: var(--ml-text-xl);
+
+		/* Background variants */
+		--ml-hero-bg-subtle: var(--ml-color-surface-secondary);
+		--ml-hero-bg-gradient: linear-gradient(
+			135deg,
+			var(--ml-color-primary-subtle) 0%,
+			var(--ml-color-surface) 50%,
+			var(--ml-color-success-subtle, var(--ml-color-surface-secondary)) 100%
+		);
+
+		/* Container */
+		--ml-hero-container-max-width: var(--ml-container-xl, 1280px);
+		--ml-hero-content-max-width: 800px;
+		--ml-hero-split-gap: var(--ml-space-12);
+
+		/* Eyebrow */
+		--ml-hero-eyebrow-margin-bottom: var(--ml-space-4);
+		--ml-hero-eyebrow-font-size: var(--ml-text-sm);
+		--ml-hero-eyebrow-font-weight: var(--ml-font-semibold);
+		--ml-hero-eyebrow-color: var(--ml-color-primary);
+		--ml-hero-eyebrow-letter-spacing: 0.05em;
+
+		/* Title */
+		--ml-hero-title-margin-bottom: var(--ml-space-4);
+		--ml-hero-title-font-weight: var(--ml-font-bold);
+		--ml-hero-title-color: var(--ml-color-text);
+		--ml-hero-title-letter-spacing: -0.025em;
+		--ml-hero-title-line-height: var(--ml-leading-tight);
+
+		/* Description */
+		--ml-hero-description-margin-bottom: var(--ml-space-8);
+		--ml-hero-description-color: var(--ml-color-text-secondary);
+		--ml-hero-description-line-height: var(--ml-leading-relaxed);
+		--ml-hero-description-max-width: 640px;
+
+		/* Actions */
+		--ml-hero-actions-gap: var(--ml-space-3);
+
+		/* Media */
+		--ml-hero-media-radius: var(--ml-radius-lg);
+		--ml-hero-media-below-margin: var(--ml-space-10);
+
+		/* Social proof */
+		--ml-hero-social-proof-margin: var(--ml-space-10);
 	}
 
 	/* ============================================
@@ -11,78 +73,73 @@ export const heroSectionStyles = () => css `
 	.ml-hero {
 		position: relative;
 		width: 100%;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-hero-font-family);
 	}
 
 	/* ============================================
 	   SIZE VARIANTS (padding & font sizes)
 	   ============================================ */
 	.ml-hero--sm {
-		padding: var(--ml-space-12) var(--ml-space-6);
+		padding: var(--ml-hero-sm-padding);
 	}
 
 	.ml-hero--md {
-		padding: var(--ml-space-20) var(--ml-space-6);
+		padding: var(--ml-hero-md-padding);
 	}
 
 	.ml-hero--lg {
-		padding: calc(var(--ml-space-20) + var(--ml-space-10)) var(--ml-space-6);
+		padding: var(--ml-hero-lg-padding);
 	}
 
 	.ml-hero--sm .ml-hero__title,
 	.ml-hero--sm ::slotted([slot="title"]) {
-		font-size: var(--ml-text-3xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-sm-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--md .ml-hero__title,
 	.ml-hero--md ::slotted([slot="title"]) {
-		font-size: var(--ml-text-4xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-md-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--lg .ml-hero__title,
 	.ml-hero--lg ::slotted([slot="title"]) {
-		font-size: var(--ml-text-5xl);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-hero-lg-title-size);
+		line-height: var(--ml-hero-title-line-height);
 	}
 
 	.ml-hero--sm .ml-hero__description,
 	.ml-hero--sm ::slotted([slot="description"]) {
-		font-size: var(--ml-text-base);
+		font-size: var(--ml-hero-sm-description-size);
 	}
 
 	.ml-hero--md .ml-hero__description,
 	.ml-hero--md ::slotted([slot="description"]) {
-		font-size: var(--ml-text-lg);
+		font-size: var(--ml-hero-md-description-size);
 	}
 
 	.ml-hero--lg .ml-hero__description,
 	.ml-hero--lg ::slotted([slot="description"]) {
-		font-size: var(--ml-text-xl);
+		font-size: var(--ml-hero-lg-description-size);
 	}
 
 	/* ============================================
 	   BACKGROUND VARIANTS
 	   ============================================ */
 	.ml-hero--bg-subtle {
-		background-color: var(--ml-color-surface-secondary);
+		background-color: var(--ml-hero-bg-subtle);
 	}
 
 	.ml-hero--bg-gradient {
-		background: linear-gradient(
-			135deg,
-			var(--ml-color-primary-subtle) 0%,
-			var(--ml-color-surface) 50%,
-			var(--ml-color-success-subtle, var(--ml-color-surface-secondary)) 100%
-		);
+		background: var(--ml-hero-bg-gradient);
 	}
 
 	/* ============================================
 	   LAYOUT: CONTAINER
 	   ============================================ */
 	.ml-hero__container {
-		max-width: var(--ml-container-xl, 1280px);
+		max-width: var(--ml-hero-container-max-width);
 		margin: 0 auto;
 		width: 100%;
 	}
@@ -101,11 +158,11 @@ export const heroSectionStyles = () => css `
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
-		max-width: 800px;
+		max-width: var(--ml-hero-content-max-width);
 	}
 
 	.ml-hero--centered .ml-hero__media--below {
-		margin-top: var(--ml-space-10);
+		margin-top: var(--ml-hero-media-below-margin);
 		width: 100%;
 		display: flex;
 		justify-content: center;
@@ -118,7 +175,7 @@ export const heroSectionStyles = () => css `
 	.ml-hero--split-reverse .ml-hero__container {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		gap: var(--ml-space-12);
+		gap: var(--ml-hero-split-gap);
 		align-items: center;
 	}
 
@@ -143,36 +200,36 @@ export const heroSectionStyles = () => css `
 	/* Eyebrow */
 	::slotted([slot="eyebrow"]) {
 		display: inline-block;
-		margin-bottom: var(--ml-space-4);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-primary);
+		margin-bottom: var(--ml-hero-eyebrow-margin-bottom);
+		font-size: var(--ml-hero-eyebrow-font-size);
+		font-weight: var(--ml-hero-eyebrow-font-weight);
+		color: var(--ml-hero-eyebrow-color);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		letter-spacing: var(--ml-hero-eyebrow-letter-spacing);
 	}
 
 	/* Title */
 	.ml-hero__title,
 	::slotted([slot="title"]) {
-		margin: 0 0 var(--ml-space-4) 0;
-		font-weight: var(--ml-font-bold);
-		color: var(--ml-color-text);
-		letter-spacing: -0.025em;
+		margin: 0 0 var(--ml-hero-title-margin-bottom) 0;
+		font-weight: var(--ml-hero-title-font-weight);
+		color: var(--ml-hero-title-color);
+		letter-spacing: var(--ml-hero-title-letter-spacing);
 	}
 
 	/* Description */
 	.ml-hero__description,
 	::slotted([slot="description"]) {
-		margin: 0 0 var(--ml-space-8) 0;
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
-		max-width: 640px;
+		margin: 0 0 var(--ml-hero-description-margin-bottom) 0;
+		color: var(--ml-hero-description-color);
+		line-height: var(--ml-hero-description-line-height);
+		max-width: var(--ml-hero-description-max-width);
 	}
 
 	/* Actions */
 	.ml-hero__actions {
 		display: flex;
-		gap: var(--ml-space-3);
+		gap: var(--ml-hero-actions-gap);
 		flex-wrap: wrap;
 	}
 
@@ -198,12 +255,12 @@ export const heroSectionStyles = () => css `
 	::slotted([slot="media"]) {
 		max-width: 100%;
 		height: auto;
-		border-radius: var(--ml-radius-lg);
+		border-radius: var(--ml-hero-media-radius);
 	}
 
 	/* Social proof */
 	.ml-hero__social-proof {
-		margin-top: var(--ml-space-10);
+		margin-top: var(--ml-hero-social-proof-margin);
 		width: 100%;
 	}
 

package/lib/components/sections/page-header/page-header.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAoK5B,CAAC"}
+{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAsM5B,CAAC"}

package/lib/components/sections/page-header/page-header.styles.js

@@ -2,29 +2,63 @@ import { css } from '@melodicdev/core';
 export const pageHeaderStyles = () => css `
 	:host {
 		display: block;
+
+		/* Padding */
+		--ml-page-header-padding: var(--ml-space-6) var(--ml-space-6) var(--ml-space-4);
+		--ml-page-header-compact-padding: var(--ml-space-4) var(--ml-space-6) var(--ml-space-3);
+		--ml-page-header-mobile-padding: var(--ml-space-4);
+
+		/* Font */
+		--ml-page-header-font-family: var(--ml-font-sans);
+
+		/* Border */
+		--ml-page-header-border-width: var(--ml-border);
+		--ml-page-header-border-color: var(--ml-color-border);
+
+		/* Title */
+		--ml-page-header-title-size: var(--ml-text-2xl);
+		--ml-page-header-title-weight: var(--ml-font-semibold);
+		--ml-page-header-title-line-height: var(--ml-leading-tight);
+		--ml-page-header-title-color: var(--ml-color-text);
+		--ml-page-header-compact-title-size: var(--ml-text-lg);
+
+		/* Description */
+		--ml-page-header-description-size: var(--ml-text-sm);
+		--ml-page-header-description-line-height: var(--ml-leading-normal);
+		--ml-page-header-description-color: var(--ml-color-text-secondary);
+
+		/* Spacing */
+		--ml-page-header-breadcrumb-margin: var(--ml-space-3);
+		--ml-page-header-main-gap: var(--ml-space-4);
+		--ml-page-header-content-gap: var(--ml-space-1);
+		--ml-page-header-meta-gap: var(--ml-space-2);
+		--ml-page-header-meta-margin: var(--ml-space-2);
+		--ml-page-header-actions-gap: var(--ml-space-2);
+		--ml-page-header-centered-actions-margin: var(--ml-space-4);
+		--ml-page-header-tabs-margin: var(--ml-space-4);
 	}
 
 	/* ============================================
 	   PAGE HEADER CONTAINER
 	   ============================================ */
 	.ml-page-header {
-		padding: var(--ml-space-6) var(--ml-space-6) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
+		padding: var(--ml-page-header-padding);
+		font-family: var(--ml-page-header-font-family);
 	}
 
 	.ml-page-header--divider {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-page-header-border-width) solid var(--ml-page-header-border-color);
 	}
 
 	/* ============================================
 	   COMPACT VARIANT
 	   ============================================ */
 	.ml-page-header--compact {
-		padding: var(--ml-space-4) var(--ml-space-6) var(--ml-space-3);
+		padding: var(--ml-page-header-compact-padding);
 	}
 
 	.ml-page-header--compact .ml-page-header__title h1 {
-		font-size: var(--ml-text-lg);
+		font-size: var(--ml-page-header-compact-title-size);
 	}
 
 	/* ============================================
@@ -44,7 +78,7 @@ export const pageHeaderStyles = () => css `
 	}
 
 	.ml-page-header--centered .ml-page-header__actions {
-		margin-top: var(--ml-space-4);
+		margin-top: var(--ml-page-header-centered-actions-margin);
 	}
 
 	.ml-page-header--centered .ml-page-header__breadcrumb {
@@ -56,7 +90,7 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__breadcrumb {
 		display: flex;
-		margin-bottom: var(--ml-space-3);
+		margin-bottom: var(--ml-page-header-breadcrumb-margin);
 	}
 
 	/* ============================================
@@ -66,7 +100,7 @@ export const pageHeaderStyles = () => css `
 		display: flex;
 		align-items: flex-start;
 		justify-content: space-between;
-		gap: var(--ml-space-4);
+		gap: var(--ml-page-header-main-gap);
 	}
 
 	/* ============================================
@@ -75,7 +109,7 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__content {
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-1);
+		gap: var(--ml-page-header-content-gap);
 		min-width: 0;
 		flex: 1;
 	}
@@ -85,18 +119,18 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__title h1 {
 		margin: 0;
-		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
-		color: var(--ml-color-text);
+		font-size: var(--ml-page-header-title-size);
+		font-weight: var(--ml-page-header-title-weight);
+		line-height: var(--ml-page-header-title-line-height);
+		color: var(--ml-page-header-title-color);
 	}
 
 	.ml-page-header__title ::slotted(*) {
 		margin: 0;
-		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
-		color: var(--ml-color-text);
+		font-size: var(--ml-page-header-title-size);
+		font-weight: var(--ml-page-header-title-weight);
+		line-height: var(--ml-page-header-title-line-height);
+		color: var(--ml-page-header-title-color);
 	}
 
 	/* ============================================
@@ -104,16 +138,16 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	.ml-page-header__description p {
 		margin: 0;
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
-		color: var(--ml-color-text-secondary);
+		font-size: var(--ml-page-header-description-size);
+		line-height: var(--ml-page-header-description-line-height);
+		color: var(--ml-page-header-description-color);
 	}
 
 	.ml-page-header__description ::slotted(*) {
 		margin: 0;
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
-		color: var(--ml-color-text-secondary);
+		font-size: var(--ml-page-header-description-size);
+		line-height: var(--ml-page-header-description-line-height);
+		color: var(--ml-page-header-description-color);
 	}
 
 	/* ============================================
@@ -122,8 +156,8 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__meta {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		margin-top: var(--ml-space-2);
+		gap: var(--ml-page-header-meta-gap);
+		margin-top: var(--ml-page-header-meta-margin);
 	}
 
 	/* ============================================
@@ -132,7 +166,7 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header__actions {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-page-header-actions-gap);
 		flex-shrink: 0;
 	}
 
@@ -140,7 +174,7 @@ export const pageHeaderStyles = () => css `
 	   TABS
 	   ============================================ */
 	.ml-page-header__tabs {
-		margin-top: var(--ml-space-4);
+		margin-top: var(--ml-page-header-tabs-margin);
 	}
 
 	/* ============================================
@@ -148,7 +182,7 @@ export const pageHeaderStyles = () => css `
 	   ============================================ */
 	@media (max-width: 640px) {
 		.ml-page-header {
-			padding: var(--ml-space-4);
+			padding: var(--ml-page-header-mobile-padding);
 		}
 
 		.ml-page-header__main {

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

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

package/lib/components/sections/page-section/page-section.styles.js

@@ -2,37 +2,67 @@ import { css } from '@melodicdev/core';
 export const pageSectionStyles = () => css `
 	:host {
 		display: block;
+
+		/* Header spacing */
+		--ml-page-section-gap: var(--ml-space-4);
+		--ml-page-section-heading-gap: var(--ml-space-1);
+
+		/* Title */
+		--ml-page-section-title-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-page-section-title-size: var(--ml-text-2xl);
+		--ml-page-section-title-weight: var(--ml-font-semibold);
+		--ml-page-section-title-color: var(--ml-color-text);
+		--ml-page-section-title-line-height: var(--ml-leading-tight);
+
+		/* Subtitle */
+		--ml-page-section-subtitle-font: var(--ml-font-sans);
+		--ml-page-section-subtitle-size: var(--ml-text-sm);
+		--ml-page-section-subtitle-color: var(--ml-color-text-muted);
+		--ml-page-section-subtitle-line-height: var(--ml-leading-normal);
+
+		/* Action link */
+		--ml-page-section-action-font: var(--ml-font-sans);
+		--ml-page-section-action-size: var(--ml-text-sm);
+		--ml-page-section-action-weight: var(--ml-font-medium);
+		--ml-page-section-action-color: var(--ml-color-primary);
+		--ml-page-section-action-hover-color: var(--ml-color-primary-hover);
+		--ml-page-section-action-transition: var(--ml-duration-150);
+
+		/* Content padding variants */
+		--ml-page-section-pad-sm: var(--ml-space-2) 0;
+		--ml-page-section-pad-md: var(--ml-space-4) 0;
+		--ml-page-section-pad-lg: var(--ml-space-6) 0;
 	}
 
 	.ml-page-section__header {
 		display: flex;
 		align-items: flex-start;
 		justify-content: space-between;
-		gap: var(--ml-space-4);
-		margin-bottom: var(--ml-page-section-gap, var(--ml-space-4));
+		gap: var(--ml-page-section-gap);
+		margin-bottom: var(--ml-page-section-gap);
 	}
 
 	.ml-page-section__heading {
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-1);
+		gap: var(--ml-page-section-heading-gap);
 	}
 
 	.ml-page-section__title {
 		margin: 0;
-		font-family: var(--ml-page-section-title-font, 'Cormorant Garamond', 'Georgia', serif);
-		font-size: var(--ml-page-section-title-size, var(--ml-text-2xl));
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
+		font-family: var(--ml-page-section-title-font);
+		font-size: var(--ml-page-section-title-size);
+		font-weight: var(--ml-page-section-title-weight);
+		color: var(--ml-page-section-title-color);
+		line-height: var(--ml-page-section-title-line-height);
 	}
 
 	.ml-page-section__subtitle {
 		margin: 0;
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-normal);
+		font-family: var(--ml-page-section-subtitle-font);
+		font-size: var(--ml-page-section-subtitle-size);
+		color: var(--ml-page-section-subtitle-color);
+		line-height: var(--ml-page-section-subtitle-line-height);
 	}
 
 	.ml-page-section__action {
@@ -40,16 +70,16 @@ export const pageSectionStyles = () => css `
 	}
 
 	.ml-page-section__action-link {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-primary);
+		font-family: var(--ml-page-section-action-font);
+		font-size: var(--ml-page-section-action-size);
+		font-weight: var(--ml-page-section-action-weight);
+		color: var(--ml-page-section-action-color);
 		text-decoration: none;
-		transition: color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: color var(--ml-page-section-action-transition) var(--ml-ease-in-out);
 	}
 
 	.ml-page-section__action-link:hover {
-		color: var(--ml-color-primary-hover);
+		color: var(--ml-page-section-action-hover-color);
 		text-decoration: underline;
 	}
 
@@ -59,14 +89,14 @@ export const pageSectionStyles = () => css `
 	}
 
 	.ml-page-section--pad-sm .ml-page-section__content {
-		padding: var(--ml-space-2) 0;
+		padding: var(--ml-page-section-pad-sm);
 	}
 
 	.ml-page-section--pad-md .ml-page-section__content {
-		padding: var(--ml-space-4) 0;
+		padding: var(--ml-page-section-pad-md);
 	}
 
 	.ml-page-section--pad-lg .ml-page-section__content {
-		padding: var(--ml-space-6) 0;
+		padding: var(--ml-page-section-pad-lg);
 	}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",