@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/data-display/profile-card/profile-card.styles.js

@@ -2,24 +2,62 @@ import { css } from '@melodicdev/core';
 export const profileCardStyles = () => css `
 	:host {
 		display: block;
+
+		/* ── Profile Card: surface ── */
+		--ml-profile-card-bg: var(--ml-color-surface);
+		--ml-profile-card-border-width: var(--ml-border);
+		--ml-profile-card-border-color: var(--ml-color-border);
+		--ml-profile-card-radius: var(--ml-radius-lg);
+
+		/* ── Profile Card: banner ── */
+		--ml-profile-card-banner-height: 80px;
+		--ml-profile-card-banner-from: var(--ml-color-primary);
+		--ml-profile-card-banner-to: var(--ml-color-primary-hover, var(--ml-color-primary));
+		--ml-profile-card-banner-opacity: 0.85;
+
+		/* ── Profile Card: avatar ── */
+		--ml-profile-card-avatar-ring-color: var(--ml-color-border);
+		--ml-profile-card-avatar-shadow: var(--ml-shadow-md);
+
+		/* ── Profile Card: name ── */
+		--ml-profile-card-name-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-profile-card-name-size: var(--ml-text-xl);
+		--ml-profile-card-name-weight: var(--ml-font-semibold);
+		--ml-profile-card-name-color: var(--ml-color-text);
+
+		/* ── Profile Card: subtitle ── */
+		--ml-profile-card-subtitle-font: var(--ml-font-sans);
+		--ml-profile-card-subtitle-size: var(--ml-text-sm);
+		--ml-profile-card-subtitle-color: var(--ml-color-text-muted);
+
+		/* ── Profile Card: section label ── */
+		--ml-profile-card-section-label-font: var(--ml-font-sans);
+		--ml-profile-card-section-label-size: var(--ml-text-xs);
+		--ml-profile-card-section-label-weight: var(--ml-font-semibold);
+		--ml-profile-card-section-label-color: var(--ml-color-text-muted);
+
+		/* ── Profile Card: details / meta text ── */
+		--ml-profile-card-detail-font: var(--ml-font-sans);
+		--ml-profile-card-detail-size: var(--ml-text-sm);
+		--ml-profile-card-detail-color: var(--ml-color-text-secondary);
 	}
 
 	.ml-profile-card {
-		background-color: var(--ml-profile-card-bg, var(--ml-color-surface));
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
+		background-color: var(--ml-profile-card-bg);
+		border: var(--ml-profile-card-border-width) solid var(--ml-profile-card-border-color);
+		border-radius: var(--ml-profile-card-radius);
 	}
 
 	/* Subtle gradient banner at top */
 	.ml-profile-card__banner {
-		height: var(--ml-profile-card-banner-height, 80px);
-		border-radius: var(--ml-radius-lg) var(--ml-radius-lg) 0 0;
+		height: var(--ml-profile-card-banner-height);
+		border-radius: var(--ml-profile-card-radius) var(--ml-profile-card-radius) 0 0;
 		background: linear-gradient(
 			135deg,
-			var(--ml-profile-card-banner-from, var(--ml-color-primary)),
-			var(--ml-profile-card-banner-to, var(--ml-color-primary-hover, var(--ml-color-primary)))
+			var(--ml-profile-card-banner-from),
+			var(--ml-profile-card-banner-to)
 		);
-		opacity: var(--ml-profile-card-banner-opacity, 0.85);
+		opacity: var(--ml-profile-card-banner-opacity);
 	}
 
 	/* Centered identity area */
@@ -38,7 +76,7 @@ export const profileCardStyles = () => css `
 		display: inline-block;
 		margin-bottom: var(--ml-space-3);
 		border-radius: var(--ml-radius-full);
-		box-shadow: 0 0 0 4px var(--ml-profile-card-bg, var(--ml-color-surface)), 0 0 0 5px var(--ml-color-border), var(--ml-shadow-md);
+		box-shadow: 0 0 0 4px var(--ml-profile-card-bg), 0 0 0 5px var(--ml-profile-card-avatar-ring-color), var(--ml-profile-card-avatar-shadow);
 		line-height: 0;
 		position: relative;
 		z-index: 1;
@@ -46,29 +84,29 @@ export const profileCardStyles = () => css `
 
 	.ml-profile-card__avatar ml-avatar {
 		display: block;
-		--ml-avatar-border-color: var(--ml-color-border-muted, var(--ml-color-border));
+		--ml-avatar-border-color: var(--ml-color-border-muted, var(--ml-profile-card-border-color));
 	}
 
 	.ml-profile-card__name {
 		margin: 0;
-		font-family: var(--ml-profile-card-name-font, 'Cormorant Garamond', 'Georgia', serif);
-		font-size: var(--ml-text-xl);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-family: var(--ml-profile-card-name-font);
+		font-size: var(--ml-profile-card-name-size);
+		font-weight: var(--ml-profile-card-name-weight);
+		color: var(--ml-profile-card-name-color);
 		line-height: var(--ml-leading-tight);
 	}
 
 	.ml-profile-card__subtitle {
 		margin: var(--ml-space-1) 0 0;
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		font-family: var(--ml-profile-card-subtitle-font);
+		font-size: var(--ml-profile-card-subtitle-size);
+		color: var(--ml-profile-card-subtitle-color);
 	}
 
 	/* Sections */
 	.ml-profile-card__section {
 		padding: var(--ml-space-4) var(--ml-space-5);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		border-top: var(--ml-profile-card-border-width) solid var(--ml-profile-card-border-color);
 	}
 
 	.ml-profile-card__section--hidden {
@@ -77,10 +115,10 @@ export const profileCardStyles = () => css `
 
 	.ml-profile-card__section-label {
 		width: 100%;
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		font-family: var(--ml-profile-card-section-label-font);
+		font-size: var(--ml-profile-card-section-label-size);
+		font-weight: var(--ml-profile-card-section-label-weight);
+		color: var(--ml-profile-card-section-label-color);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		margin-bottom: var(--ml-space-1);
@@ -102,9 +140,9 @@ export const profileCardStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		gap: var(--ml-space-2);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
+		font-family: var(--ml-profile-card-detail-font);
+		font-size: var(--ml-profile-card-detail-size);
+		color: var(--ml-profile-card-detail-color);
 	}
 
 	.ml-profile-card__details.ml-profile-card__section--hidden {
@@ -133,9 +171,9 @@ export const profileCardStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		gap: var(--ml-space-2);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
+		font-family: var(--ml-profile-card-detail-font);
+		font-size: var(--ml-profile-card-detail-size);
+		color: var(--ml-profile-card-detail-color);
 	}
 
 	.ml-profile-card__meta.ml-profile-card__section--hidden {

package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/stat-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA+E1B,CAAC"}
+{"version":3,"file":"stat-card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/stat-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqH1B,CAAC"}

package/lib/components/data-display/stat-card/stat-card.styles.js

@@ -2,15 +2,53 @@ import { css } from '@melodicdev/core';
 export const statCardStyles = () => css `
 	:host {
 		display: block;
-		min-width: var(--ml-stat-card-min-width, 200px);
+
+		/* ── Stat Card: host ── */
+		--ml-stat-card-min-width: 200px;
+
+		/* ── Stat Card: surface ── */
+		--ml-stat-card-bg: var(--ml-color-surface);
+		--ml-stat-card-border-width: var(--ml-border);
+		--ml-stat-card-border-color: var(--ml-color-border);
+		--ml-stat-card-radius: var(--ml-radius-lg);
+		--ml-stat-card-padding: var(--ml-space-5) var(--ml-space-6);
+		--ml-stat-card-shadow: var(--ml-shadow-xs);
+
+		/* ── Stat Card: label ── */
+		--ml-stat-card-label-font: var(--ml-font-sans);
+		--ml-stat-card-label-size: var(--ml-text-xs);
+		--ml-stat-card-label-weight: var(--ml-font-semibold);
+		--ml-stat-card-label-color: var(--ml-color-text-muted);
+
+		/* ── Stat Card: icon ── */
+		--ml-stat-card-icon-size: 36px;
+		--ml-stat-card-icon-bg: var(--ml-color-surface-raised, var(--ml-color-surface-sunken));
+		--ml-stat-card-icon-color: var(--ml-color-text-tertiary);
+		--ml-stat-card-icon-radius: var(--ml-radius);
+
+		/* ── Stat Card: value ── */
+		--ml-stat-card-value-color: var(--ml-color-text);
+		--ml-stat-card-value-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-stat-card-value-size: 2.5rem;
+		--ml-stat-card-value-weight: 300;
+		--ml-stat-card-value-sans-size: 2rem;
+
+		/* ── Stat Card: trend ── */
+		--ml-stat-card-trend-font: var(--ml-font-sans);
+		--ml-stat-card-trend-size: var(--ml-text-xs);
+		--ml-stat-card-trend-color: var(--ml-color-text-muted);
+		--ml-stat-card-trend-up-color: var(--ml-color-success);
+		--ml-stat-card-trend-down-color: var(--ml-color-error);
+
+		min-width: var(--ml-stat-card-min-width);
 	}
 
 	.ml-stat-card {
-		background-color: var(--ml-stat-card-bg, var(--ml-color-surface));
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		padding: var(--ml-space-5) var(--ml-space-6);
-		box-shadow: var(--ml-shadow-xs);
+		background-color: var(--ml-stat-card-bg);
+		border: var(--ml-stat-card-border-width) solid var(--ml-stat-card-border-color);
+		border-radius: var(--ml-stat-card-radius);
+		padding: var(--ml-stat-card-padding);
+		box-shadow: var(--ml-stat-card-shadow);
 	}
 
 	.ml-stat-card__header {
@@ -22,10 +60,10 @@ export const statCardStyles = () => css `
 	}
 
 	.ml-stat-card__label {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		font-family: var(--ml-stat-card-label-font);
+		font-size: var(--ml-stat-card-label-size);
+		font-weight: var(--ml-stat-card-label-weight);
+		color: var(--ml-stat-card-label-color);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
@@ -34,48 +72,48 @@ export const statCardStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--ml-stat-card-icon-size, 36px);
-		height: var(--ml-stat-card-icon-size, 36px);
-		border-radius: var(--ml-radius);
-		background-color: var(--ml-stat-card-icon-bg, var(--ml-color-surface-raised, var(--ml-color-surface-sunken)));
-		color: var(--ml-stat-card-icon-color, var(--ml-color-text-tertiary));
+		width: var(--ml-stat-card-icon-size);
+		height: var(--ml-stat-card-icon-size);
+		border-radius: var(--ml-stat-card-icon-radius);
+		background-color: var(--ml-stat-card-icon-bg);
+		color: var(--ml-stat-card-icon-color);
 		flex-shrink: 0;
 	}
 
 	.ml-stat-card__value {
-		color: var(--ml-stat-card-value-color, var(--ml-color-text));
+		color: var(--ml-stat-card-value-color);
 		line-height: 1.1;
 		margin-bottom: var(--ml-space-1);
 	}
 
 	.ml-stat-card__value--serif {
-		font-family: var(--ml-stat-card-value-font, 'Cormorant Garamond', 'Georgia', serif);
-		font-size: var(--ml-stat-card-value-size, 2.5rem);
-		font-weight: var(--ml-stat-card-value-weight, 300);
+		font-family: var(--ml-stat-card-value-font);
+		font-size: var(--ml-stat-card-value-size);
+		font-weight: var(--ml-stat-card-value-weight);
 	}
 
 	.ml-stat-card__value--sans {
 		font-family: var(--ml-font-sans);
-		font-size: var(--ml-stat-card-value-size, 2rem);
+		font-size: var(--ml-stat-card-value-sans-size);
 		font-weight: var(--ml-font-bold);
 	}
 
 	.ml-stat-card__trend {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
+		font-family: var(--ml-stat-card-trend-font);
+		font-size: var(--ml-stat-card-trend-size);
+		color: var(--ml-stat-card-trend-color);
 		line-height: var(--ml-leading-normal);
 	}
 
 	.ml-stat-card__trend--up {
-		color: var(--ml-color-success);
+		color: var(--ml-stat-card-trend-up-color);
 	}
 
 	.ml-stat-card__trend--down {
-		color: var(--ml-color-error);
+		color: var(--ml-stat-card-trend-down-color);
 	}
 
 	.ml-stat-card__trend--neutral {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-stat-card-trend-color);
 	}
 `;

package/lib/components/data-display/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAqPvB,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAwRvB,CAAC"}

package/lib/components/data-display/table/table.styles.js

@@ -2,14 +2,49 @@ import { css } from '@melodicdev/core';
 export const tableStyles = () => css `
 	:host {
 		display: block;
+
+		/* ── Table: surface ── */
+		--ml-table-bg: var(--ml-color-surface);
+		--ml-table-border-width: var(--ml-border);
+		--ml-table-border-color: var(--ml-color-border);
+		--ml-table-radius: var(--ml-radius-lg);
+		--ml-table-font: var(--ml-font-sans);
+
+		/* ── Table: header section ── */
+		--ml-table-title-color: var(--ml-color-text);
+		--ml-table-description-color: var(--ml-color-text-muted);
+
+		/* ── Table: column header ── */
+		--ml-table-header-bg: var(--ml-color-surface-sunken);
+		--ml-table-header-color: var(--ml-color-text-muted);
+		--ml-table-header-sorted-color: var(--ml-color-text);
+
+		/* ── Table: sort icon ── */
+		--ml-table-sort-color: var(--ml-color-text-muted);
+		--ml-table-sort-active-color: var(--ml-color-primary);
+
+		/* ── Table: rows ── */
+		--ml-table-row-hover-bg: var(--ml-color-surface-sunken);
+		--ml-table-row-hover-border-color: transparent;
+		--ml-table-row-hover-border-width: 0;
+		--ml-table-row-selected-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
+		--ml-table-row-selected-hover-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.06));
+		--ml-table-row-striped-bg: var(--ml-color-surface-sunken);
+		--ml-table-row-striped-hover-bg: var(--ml-color-surface-raised);
+
+		/* ── Table: cells ── */
+		--ml-table-cell-color: var(--ml-color-text);
+
+		/* ── Table: checkbox ── */
+		--ml-table-checkbox-accent: var(--ml-color-primary);
 	}
 
 	.ml-table {
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-table-border-width) solid var(--ml-table-border-color);
+		border-radius: var(--ml-table-radius);
+		background-color: var(--ml-table-bg);
 		overflow: hidden;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-table-font);
 	}
 
 	/* ── Header ── */
@@ -19,7 +54,7 @@ export const tableStyles = () => css `
 		justify-content: space-between;
 		gap: var(--ml-space-4);
 		padding: var(--ml-space-5) var(--ml-space-6);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-table-border-width) solid var(--ml-table-border-color);
 	}
 
 	.ml-table__header-text {
@@ -32,14 +67,14 @@ export const tableStyles = () => css `
 		margin: 0;
 		font-size: var(--ml-text-lg);
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-table-title-color);
 		line-height: var(--ml-leading-tight);
 	}
 
 	.ml-table__description {
 		margin: 0;
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-table-description-color);
 		line-height: var(--ml-leading-normal);
 	}
 
@@ -56,7 +91,7 @@ export const tableStyles = () => css `
 
 	/* ── Header cells ── */
 	thead {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-table-header-bg);
 	}
 
 	.ml-table--sticky-header thead {
@@ -66,14 +101,14 @@ export const tableStyles = () => css `
 	}
 
 	thead tr {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-table-border-width) solid var(--ml-table-border-color);
 	}
 
 	.ml-table__th {
 		padding: var(--ml-space-3) var(--ml-space-6);
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-table-header-color);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		text-align: left;
@@ -94,11 +129,11 @@ export const tableStyles = () => css `
 	}
 
 	.ml-table__th--sortable:hover {
-		color: var(--ml-color-text);
+		color: var(--ml-table-header-sorted-color);
 	}
 
 	.ml-table__th--sorted {
-		color: var(--ml-color-text);
+		color: var(--ml-table-header-sorted-color);
 	}
 
 	.ml-table__th-content {
@@ -111,16 +146,16 @@ export const tableStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-table-sort-color);
 	}
 
 	.ml-table__th--sorted .ml-table__sort-icon {
-		color: var(--ml-color-primary);
+		color: var(--ml-table-sort-active-color);
 	}
 
 	/* ── Body rows ── */
 	.ml-table__row {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-table-border-width) solid var(--ml-table-border-color);
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 	}
 
@@ -129,9 +164,9 @@ export const tableStyles = () => css `
 	}
 
 	.ml-table--hoverable .ml-table__row:hover {
-		background-color: var(--ml-table-row-hover-bg, var(--ml-color-surface-sunken));
-		border-color: var(--ml-table-row-hover-border-color, transparent);
-		border-width: var(--ml-table-row-hover-border-width, 0);
+		background-color: var(--ml-table-row-hover-bg);
+		border-color: var(--ml-table-row-hover-border-color);
+		border-width: var(--ml-table-row-hover-border-width);
 		border-style: solid;
 	}
 
@@ -140,27 +175,27 @@ export const tableStyles = () => css `
 	}
 
 	.ml-table__row--selected {
-		background-color: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
+		background-color: var(--ml-table-row-selected-bg);
 	}
 
 	.ml-table--hoverable .ml-table__row--selected:hover {
-		background-color: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.06));
+		background-color: var(--ml-table-row-selected-hover-bg);
 	}
 
 	/* Striped */
 	.ml-table--striped .ml-table__row:nth-child(even) {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-table-row-striped-bg);
 	}
 
 	.ml-table--striped.ml-table--hoverable .ml-table__row:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-table-row-striped-hover-bg);
 	}
 
 	/* ── Body cells ── */
 	.ml-table__td {
 		padding: var(--ml-space-4) var(--ml-space-6);
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text);
+		color: var(--ml-table-cell-color);
 		vertical-align: middle;
 	}
 
@@ -187,7 +222,7 @@ export const tableStyles = () => css `
 	.ml-table__checkbox {
 		width: 1rem;
 		height: 1rem;
-		accent-color: var(--ml-color-primary);
+		accent-color: var(--ml-table-checkbox-accent);
 		cursor: pointer;
 		margin: 0;
 		vertical-align: middle;
@@ -238,7 +273,7 @@ export const tableStyles = () => css `
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--ml-space-3) var(--ml-space-6);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		border-top: var(--ml-table-border-width) solid var(--ml-table-border-color);
 	}
 
 	.ml-table--sm .ml-table__footer--visible {

package/lib/components/data-display/tag/tag.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tag/tag.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDAgMrB,CAAC"}
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tag/tag.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDAqOrB,CAAC"}