@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/forms/button/button.styles.js

@@ -2,6 +2,38 @@ import { css } from '@melodicdev/core';
 export const buttonStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* --- Colors --- */
+		--ml-button-bg: var(--ml-color-primary);
+		--ml-button-border-color: var(--ml-color-primary);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-primary-hover);
+		--ml-button-hover-border-color: var(--ml-color-primary-hover);
+		--ml-button-hover-color: var(--ml-color-text-inverse);
+		--ml-button-active-bg: var(--ml-color-primary-active);
+		--ml-button-active-border-color: var(--ml-color-primary-active);
+		--ml-button-shadow: var(--ml-shadow-xs);
+		--ml-button-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Typography --- */
+		--ml-button-font-family: var(--ml-font-sans);
+		--ml-button-font-weight: var(--ml-font-semibold);
+		--ml-button-font-size: var(--ml-text-sm);
+		--ml-button-line-height: var(--ml-leading-tight);
+
+		/* --- Spacing --- */
+		--ml-button-height: 2.5rem;
+		--ml-button-padding: 0 var(--ml-space-3-5);
+		--ml-button-gap: var(--ml-space-2);
+		--ml-button-border-width: var(--ml-border);
+		--ml-button-border-radius: var(--ml-radius);
+
+		/* --- Disabled --- */
+		--ml-button-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-button-transition-duration: var(--ml-duration-150);
+		--ml-button-transition-easing: var(--ml-ease-in-out);
 	}
 
 	:host([full-width]) {
@@ -18,22 +50,27 @@ export const buttonStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-button-gap);
 		position: relative;
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-semibold);
-		line-height: var(--ml-leading-tight);
+		font-family: var(--ml-button-font-family);
+		font-weight: var(--ml-button-font-weight);
+		font-size: var(--ml-button-font-size);
+		line-height: var(--ml-button-line-height);
 		white-space: nowrap;
 		text-align: center;
-		border: var(--ml-border) solid transparent;
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
+		height: var(--ml-button-height);
+		padding: var(--ml-button-padding);
+		border: var(--ml-button-border-width) solid var(--ml-button-border-color);
+		border-radius: var(--ml-button-border-radius);
+		background-color: var(--ml-button-bg);
+		color: var(--ml-button-color);
+		box-shadow: var(--ml-button-shadow);
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out),
-			transform var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			border-color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			color var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			box-shadow var(--ml-button-transition-duration) var(--ml-button-transition-easing),
+			transform var(--ml-button-transition-duration) var(--ml-button-transition-easing);
 	}
 
 	.ml-button:focus {
@@ -41,152 +78,140 @@ export const buttonStyles = () => css `
 	}
 
 	.ml-button:focus-visible {
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-button-focus-shadow);
+	}
+
+	.ml-button:hover:not(:disabled) {
+		background-color: var(--ml-button-hover-bg);
+		border-color: var(--ml-button-hover-border-color);
+		color: var(--ml-button-hover-color);
+	}
+
+	.ml-button:active:not(:disabled) {
+		background-color: var(--ml-button-active-bg);
+		border-color: var(--ml-button-active-border-color);
 	}
 
+	/* --- Size variants --- */
 	.ml-button--xs {
-		height: 2rem;
-		padding: 0 var(--ml-space-3);
-		font-size: var(--ml-text-xs);
-		border-radius: var(--ml-radius-sm);
+		--ml-button-height: 2rem;
+		--ml-button-padding: 0 var(--ml-space-3);
+		--ml-button-font-size: var(--ml-text-xs);
+		--ml-button-border-radius: var(--ml-radius-sm);
 	}
 
 	.ml-button--sm {
-		height: 2.25rem;
-		padding: 0 var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		border-radius: var(--ml-radius);
+		--ml-button-height: 2.25rem;
+		--ml-button-padding: 0 var(--ml-space-3);
+		--ml-button-font-size: var(--ml-text-sm);
+		--ml-button-border-radius: var(--ml-radius);
 	}
 
 	.ml-button--md {
-		height: 2.5rem;
-		padding: 0 var(--ml-space-3-5);
-		font-size: var(--ml-text-sm);
+		--ml-button-height: 2.5rem;
+		--ml-button-padding: 0 var(--ml-space-3-5);
+		--ml-button-font-size: var(--ml-text-sm);
 	}
 
 	.ml-button--lg {
-		height: 2.75rem;
-		padding: 0 var(--ml-space-4);
-		font-size: var(--ml-text-sm);
+		--ml-button-height: 2.75rem;
+		--ml-button-padding: 0 var(--ml-space-4);
+		--ml-button-font-size: var(--ml-text-sm);
 	}
 
 	.ml-button--xl {
-		height: 3rem;
-		padding: 0 var(--ml-space-5);
-		font-size: var(--ml-text-base);
+		--ml-button-height: 3rem;
+		--ml-button-padding: 0 var(--ml-space-5);
+		--ml-button-font-size: var(--ml-text-base);
 	}
 
 	.ml-button--2xl {
-		height: 3.75rem;
-		padding: 0 var(--ml-space-7);
-		font-size: var(--ml-text-lg);
-		gap: var(--ml-space-3);
+		--ml-button-height: 3.75rem;
+		--ml-button-padding: 0 var(--ml-space-7);
+		--ml-button-font-size: var(--ml-text-lg);
+		--ml-button-gap: var(--ml-space-3);
 	}
 
+	/* --- Variant: primary (default — already set on :host) --- */
 	.ml-button--primary {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
-	}
-
-	.ml-button--primary:hover:not(:disabled) {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
-	}
-
-	.ml-button--primary:active:not(:disabled) {
-		background-color: var(--ml-color-primary-active);
-		border-color: var(--ml-color-primary-active);
+		--ml-button-bg: var(--ml-color-primary);
+		--ml-button-border-color: var(--ml-color-primary);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-primary-hover);
+		--ml-button-hover-border-color: var(--ml-color-primary-hover);
+		--ml-button-active-bg: var(--ml-color-primary-active);
+		--ml-button-active-border-color: var(--ml-color-primary-active);
 	}
 
+	/* --- Variant: secondary --- */
 	.ml-button--secondary {
-		background-color: var(--ml-color-surface);
-		border-color: var(--ml-color-border-strong);
-		color: var(--ml-color-text-secondary);
-	}
-
-	.ml-button--secondary:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
-	}
-
-	.ml-button--secondary:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
-	}
-
-	.ml-button--secondary:focus-visible {
-		box-shadow: var(--ml-shadow-ring-gray);
+		--ml-button-bg: var(--ml-color-surface);
+		--ml-button-border-color: var(--ml-color-border-strong);
+		--ml-button-color: var(--ml-color-text-secondary);
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: var(--ml-color-border-strong);
+		--ml-button-hover-color: var(--ml-color-text);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
+		--ml-button-focus-shadow: var(--ml-shadow-ring-gray);
 	}
 
+	/* --- Variant: outline --- */
 	.ml-button--outline {
-		background-color: transparent;
-		border-color: var(--ml-color-border-strong);
-		color: var(--ml-color-text-secondary);
-		box-shadow: none;
-	}
-
-	.ml-button--outline:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
-	}
-
-	.ml-button--outline:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: var(--ml-color-border-strong);
+		--ml-button-color: var(--ml-color-text-secondary);
+		--ml-button-shadow: none;
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: var(--ml-color-border-strong);
+		--ml-button-hover-color: var(--ml-color-text);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
 	}
 
+	/* --- Variant: ghost --- */
 	.ml-button--ghost {
-		background-color: transparent;
-		border-color: transparent;
-		color: var(--ml-color-text-muted);
-		box-shadow: none;
-	}
-
-	.ml-button--ghost:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text-secondary);
-	}
-
-	.ml-button--ghost:active:not(:disabled) {
-		background-color: var(--ml-color-surface-sunken);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: transparent;
+		--ml-button-color: var(--ml-color-text-muted);
+		--ml-button-shadow: none;
+		--ml-button-hover-bg: var(--ml-color-surface-raised);
+		--ml-button-hover-border-color: transparent;
+		--ml-button-hover-color: var(--ml-color-text-secondary);
+		--ml-button-active-bg: var(--ml-color-surface-sunken);
 	}
 
+	/* --- Variant: danger --- */
 	.ml-button--danger {
-		background-color: var(--ml-color-danger);
-		border-color: var(--ml-color-danger);
-		color: var(--ml-color-text-inverse);
-	}
-
-	.ml-button--danger:hover:not(:disabled) {
-		background-color: var(--ml-color-danger-hover);
-		border-color: var(--ml-color-danger-hover);
-	}
-
-	.ml-button--danger:active:not(:disabled) {
-		background-color: var(--ml-red-800);
-		border-color: var(--ml-red-800);
-	}
-
-	.ml-button--danger:focus-visible {
-		box-shadow: var(--ml-shadow-ring-error);
+		--ml-button-bg: var(--ml-color-danger);
+		--ml-button-border-color: var(--ml-color-danger);
+		--ml-button-color: var(--ml-color-text-inverse);
+		--ml-button-hover-bg: var(--ml-color-danger-hover);
+		--ml-button-hover-border-color: var(--ml-color-danger-hover);
+		--ml-button-active-bg: var(--ml-red-800);
+		--ml-button-active-border-color: var(--ml-red-800);
+		--ml-button-focus-shadow: var(--ml-shadow-ring-error);
 	}
 
+	/* --- Variant: link --- */
 	.ml-button--link {
-		background-color: transparent;
-		border-color: transparent;
-		color: var(--ml-color-text-link);
-		padding: 0;
-		height: auto;
-		box-shadow: none;
-		font-weight: var(--ml-font-medium);
+		--ml-button-bg: transparent;
+		--ml-button-border-color: transparent;
+		--ml-button-color: var(--ml-color-text-link);
+		--ml-button-shadow: none;
+		--ml-button-font-weight: var(--ml-font-medium);
+		--ml-button-height: auto;
+		--ml-button-padding: 0;
+		--ml-button-hover-bg: transparent;
+		--ml-button-hover-border-color: transparent;
+		--ml-button-hover-color: var(--ml-color-text-link-hover);
 	}
 
 	.ml-button--link:hover:not(:disabled) {
-		color: var(--ml-color-text-link-hover);
 		text-decoration: underline;
 	}
 
+	/* --- Disabled --- */
 	.ml-button--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-button-disabled-opacity);
 		cursor: not-allowed;
 		pointer-events: none;
 		box-shadow: none;
@@ -211,7 +236,7 @@ export const buttonStyles = () => css `
 	.ml-button__content {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-button-gap);
 	}
 
 	::slotted([slot='icon-start']),

package/lib/components/forms/button-group/button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAsB7B,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button-group/button-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDA4B7B,CAAC"}

package/lib/components/forms/button-group/button-group.styles.js

@@ -2,6 +2,12 @@ import { css } from '@melodicdev/core';
 export const buttonGroupStyles = () => css `
 	:host {
 		display: inline-flex;
+
+		/* --- Disabled --- */
+		--ml-button-group-disabled-opacity: 0.5;
+
+		/* --- Spacing --- */
+		--ml-button-group-item-offset: -1px;
 	}
 
 	.ml-button-group {
@@ -10,12 +16,12 @@ export const buttonGroupStyles = () => css `
 	}
 
 	.ml-button-group--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-button-group-disabled-opacity);
 		pointer-events: none;
 	}
 
 	::slotted(ml-button-group-item) {
-		margin-left: -1px;
+		margin-left: var(--ml-button-group-item-offset);
 	}
 
 	::slotted(ml-button-group-item:first-child) {

package/lib/components/forms/checkbox/checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAkH1B,CAAC"}
+{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAoJ1B,CAAC"}

package/lib/components/forms/checkbox/checkbox.styles.js

@@ -2,18 +2,59 @@ import { css } from '@melodicdev/core';
 export const checkboxStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Box --- */
+		--ml-checkbox-box-size: 1.25rem;
+		--ml-checkbox-box-bg: var(--ml-color-input-bg);
+		--ml-checkbox-box-border-width: var(--ml-border);
+		--ml-checkbox-box-border-color: var(--ml-color-border-strong);
+		--ml-checkbox-box-border-radius: var(--ml-radius-xs);
+		--ml-checkbox-box-color: var(--ml-color-text-inverse);
+
+		/* --- Checked --- */
+		--ml-checkbox-checked-bg: var(--ml-color-primary);
+		--ml-checkbox-checked-border-color: var(--ml-color-primary);
+		--ml-checkbox-checked-hover-bg: var(--ml-color-primary-hover);
+		--ml-checkbox-checked-hover-border-color: var(--ml-color-primary-hover);
+
+		/* --- Hover --- */
+		--ml-checkbox-hover-border-color: var(--ml-color-primary);
+
+		/* --- Focus --- */
+		--ml-checkbox-focus-border-color: var(--ml-color-primary);
+		--ml-checkbox-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Label --- */
+		--ml-checkbox-label-font-size: var(--ml-text-sm);
+		--ml-checkbox-label-font-weight: var(--ml-font-medium);
+		--ml-checkbox-label-color: var(--ml-color-text-secondary);
+		--ml-checkbox-label-line-height: 1.25rem;
+
+		/* --- Hint --- */
+		--ml-checkbox-hint-font-size: var(--ml-text-sm);
+		--ml-checkbox-hint-color: var(--ml-color-text-muted);
+
+		/* --- Gap --- */
+		--ml-checkbox-gap: var(--ml-space-3);
+
+		/* --- Disabled --- */
+		--ml-checkbox-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-checkbox-transition-duration: var(--ml-duration-150);
+		--ml-checkbox-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-checkbox {
 		display: inline-flex;
 		align-items: flex-start;
-		gap: var(--ml-space-3);
+		gap: var(--ml-checkbox-gap);
 		cursor: pointer;
 		user-select: none;
 	}
 
 	.ml-checkbox:hover:not(.ml-checkbox--disabled) .ml-checkbox__box {
-		border-color: var(--ml-color-primary);
+		border-color: var(--ml-checkbox-hover-border-color);
 	}
 
 	.ml-checkbox__input {
@@ -24,22 +65,24 @@ export const checkboxStyles = () => css `
 	}
 
 	.ml-checkbox__input:focus-visible + .ml-checkbox__box {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-checkbox-focus-border-color);
+		box-shadow: var(--ml-checkbox-focus-shadow);
 	}
 
 	.ml-checkbox__box {
 		position: relative;
 		flex-shrink: 0;
 		display: block;
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius-xs);
-		color: var(--ml-color-text-inverse);
+		width: var(--ml-checkbox-box-size);
+		height: var(--ml-checkbox-box-size);
+		background-color: var(--ml-checkbox-box-bg);
+		border: var(--ml-checkbox-box-border-width) solid var(--ml-checkbox-box-border-color);
+		border-radius: var(--ml-checkbox-box-border-radius);
+		color: var(--ml-checkbox-box-color);
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing),
+			border-color var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing),
+			box-shadow var(--ml-checkbox-transition-duration) var(--ml-checkbox-transition-easing);
 	}
 
 	.ml-checkbox__check,
@@ -53,18 +96,18 @@ export const checkboxStyles = () => css `
 	}
 
 	.ml-checkbox__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: 1.25rem;
+		font-size: var(--ml-checkbox-label-font-size);
+		font-weight: var(--ml-checkbox-label-font-weight);
+		color: var(--ml-checkbox-label-color);
+		line-height: var(--ml-checkbox-label-line-height);
 	}
 
 	.ml-checkbox__hint {
 		display: block;
 		margin-top: var(--ml-space-0-5);
-		margin-left: calc(1.25rem + var(--ml-space-3));
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		margin-left: calc(var(--ml-checkbox-box-size) + var(--ml-checkbox-gap));
+		font-size: var(--ml-checkbox-hint-font-size);
+		color: var(--ml-checkbox-hint-color);
 		line-height: var(--ml-leading-tight);
 	}
 
@@ -75,42 +118,33 @@ export const checkboxStyles = () => css `
 
 	.ml-checkbox--disabled .ml-checkbox__box,
 	.ml-checkbox--disabled .ml-checkbox__label {
-		opacity: 0.5;
+		opacity: var(--ml-checkbox-disabled-opacity);
 	}
 
 	.ml-checkbox--checked .ml-checkbox__box,
 	.ml-checkbox--indeterminate .ml-checkbox__box {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
+		background-color: var(--ml-checkbox-checked-bg);
+		border-color: var(--ml-checkbox-checked-border-color);
 	}
 
 	.ml-checkbox--checked:hover:not(.ml-checkbox--disabled) .ml-checkbox__box,
 	.ml-checkbox--indeterminate:hover:not(.ml-checkbox--disabled) .ml-checkbox__box {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
-	}
-
-	.ml-checkbox--sm .ml-checkbox__box {
-		width: 1rem;
-		height: 1rem;
-	}
-
-	.ml-checkbox--md .ml-checkbox__box {
-		width: 1.25rem;
-		height: 1.25rem;
+		background-color: var(--ml-checkbox-checked-hover-bg);
+		border-color: var(--ml-checkbox-checked-hover-border-color);
 	}
 
-	.ml-checkbox--lg .ml-checkbox__box {
-		width: 1.5rem;
-		height: 1.5rem;
+	/* --- Size variants --- */
+	.ml-checkbox--sm {
+		--ml-checkbox-box-size: 1rem;
 	}
 
-	.ml-checkbox--lg .ml-checkbox__label {
-		font-size: var(--ml-text-base);
-		line-height: 1.5rem;
+	.ml-checkbox--md {
+		--ml-checkbox-box-size: 1.25rem;
 	}
 
-	.ml-checkbox--lg + .ml-checkbox__hint {
-		margin-left: calc(1.5rem + var(--ml-space-3));
+	.ml-checkbox--lg {
+		--ml-checkbox-box-size: 1.5rem;
+		--ml-checkbox-label-font-size: var(--ml-text-base);
+		--ml-checkbox-label-line-height: 1.5rem;
 	}
 `;

package/lib/components/forms/date-picker/calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAwL1B,CAAC"}
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/calendar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqP1B,CAAC"}