@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/feedback/spinner/spinner.styles.js

@@ -4,6 +4,18 @@ export const spinnerStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+
+		/* Color — defaults to currentColor via stroke in SVG */
+		--ml-spinner-color: currentColor;
+
+		/* Size — default md (1.5rem) */
+		--ml-spinner-size: 1.5rem;
+
+		/* Track opacity */
+		--ml-spinner-track-opacity: 0.25;
+
+		/* Animation */
+		--ml-spinner-animation-duration: 0.75s;
 	}
 
 	.spinner {
@@ -13,40 +25,44 @@ export const spinnerStyles = () => css `
 	}
 
 	.spinner__svg {
-		animation: spin 0.75s linear infinite;
+		animation: spin var(--ml-spinner-animation-duration) linear infinite;
 	}
 
 	.spinner__track {
-		opacity: 0.25;
+		opacity: var(--ml-spinner-track-opacity);
 	}
 
 	.spinner__indicator {
 		opacity: 1;
 	}
 
-	.spinner--xs .spinner__svg {
-		width: 1rem;
-		height: 1rem;
+	.spinner--xs {
+		--ml-spinner-size: 1rem;
+	}
+
+	.spinner--sm {
+		--ml-spinner-size: 1.25rem;
 	}
 
-	.spinner--sm .spinner__svg {
-		width: 1.25rem;
-		height: 1.25rem;
+	.spinner--md {
+		--ml-spinner-size: 1.5rem;
 	}
 
-	.spinner--md .spinner__svg {
-		width: 1.5rem;
-		height: 1.5rem;
+	.spinner--lg {
+		--ml-spinner-size: 2rem;
 	}
 
-	.spinner--lg .spinner__svg {
-		width: 2rem;
-		height: 2rem;
+	.spinner--xl {
+		--ml-spinner-size: 2.5rem;
 	}
 
+	.spinner--xs .spinner__svg,
+	.spinner--sm .spinner__svg,
+	.spinner--md .spinner__svg,
+	.spinner--lg .spinner__svg,
 	.spinner--xl .spinner__svg {
-		width: 2.5rem;
-		height: 2.5rem;
+		width: var(--ml-spinner-size);
+		height: var(--ml-spinner-size);
 	}
 
 	@keyframes spin {

package/lib/components/feedback/toast/toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/toast/toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA4FvB,CAAC"}
+{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/toast/toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAuIvB,CAAC"}

package/lib/components/feedback/toast/toast.styles.js

@@ -2,20 +2,63 @@ import { css } from '@melodicdev/core';
 export const toastStyles = () => css `
 	:host {
 		display: block;
+
+		/* Background & border */
+		--ml-toast-bg: var(--ml-color-surface);
+		--ml-toast-border-color: var(--ml-color-border);
+		--ml-toast-border-radius: var(--ml-radius-lg);
+		--ml-toast-shadow: var(--ml-shadow-lg);
+
+		/* Spacing */
+		--ml-toast-gap: var(--ml-space-3);
+		--ml-toast-padding: var(--ml-space-4);
+		--ml-toast-min-width: 320px;
+		--ml-toast-max-width: 420px;
+
+		/* Title */
+		--ml-toast-title-font-size: var(--ml-text-sm);
+		--ml-toast-title-font-weight: var(--ml-font-semibold);
+		--ml-toast-title-color: var(--ml-color-text);
+		--ml-toast-title-line-height: var(--ml-leading-tight);
+
+		/* Message */
+		--ml-toast-message-font-size: var(--ml-text-sm);
+		--ml-toast-message-color: var(--ml-color-text-secondary);
+		--ml-toast-message-line-height: var(--ml-leading-relaxed);
+		--ml-toast-message-margin-top: var(--ml-space-1);
+
+		/* Icon variant colors */
+		--ml-toast-info-icon-color: var(--ml-color-primary);
+		--ml-toast-success-icon-color: var(--ml-color-success);
+		--ml-toast-warning-icon-color: var(--ml-color-warning);
+		--ml-toast-error-icon-color: var(--ml-color-danger);
+
+		/* Dismiss button */
+		--ml-toast-dismiss-border-radius: var(--ml-radius-sm);
+		--ml-toast-dismiss-color: var(--ml-color-text-tertiary);
+		--ml-toast-dismiss-hover-color: var(--ml-color-text);
+
+		/* Transition */
+		--ml-toast-transition-duration: var(--ml-duration-150);
+		--ml-toast-transition-easing: var(--ml-ease-in-out);
+
+		/* Animation */
+		--ml-toast-animation-duration: var(--ml-duration-300);
+		--ml-toast-animation-easing: var(--ml-ease-out);
 	}
 
 	.ml-toast {
 		display: flex;
 		align-items: flex-start;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-4);
-		background-color: var(--ml-color-surface);
-		border: 1px solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		box-shadow: var(--ml-shadow-lg);
-		min-width: 320px;
-		max-width: 420px;
-		animation: ml-toast-in var(--ml-duration-300) var(--ml-ease-out);
+		gap: var(--ml-toast-gap);
+		padding: var(--ml-toast-padding);
+		background-color: var(--ml-toast-bg);
+		border: 1px solid var(--ml-toast-border-color);
+		border-radius: var(--ml-toast-border-radius);
+		box-shadow: var(--ml-toast-shadow);
+		min-width: var(--ml-toast-min-width);
+		max-width: var(--ml-toast-max-width);
+		animation: ml-toast-in var(--ml-toast-animation-duration) var(--ml-toast-animation-easing);
 	}
 
 	@keyframes ml-toast-in {
@@ -36,19 +79,19 @@ export const toastStyles = () => css `
 	}
 
 	.ml-toast--info .ml-toast__icon {
-		color: var(--ml-color-primary);
+		color: var(--ml-toast-info-icon-color);
 	}
 
 	.ml-toast--success .ml-toast__icon {
-		color: var(--ml-color-success);
+		color: var(--ml-toast-success-icon-color);
 	}
 
 	.ml-toast--warning .ml-toast__icon {
-		color: var(--ml-color-warning);
+		color: var(--ml-toast-warning-icon-color);
 	}
 
 	.ml-toast--error .ml-toast__icon {
-		color: var(--ml-color-danger);
+		color: var(--ml-toast-error-icon-color);
 	}
 
 	.ml-toast__content {
@@ -57,21 +100,21 @@ export const toastStyles = () => css `
 	}
 
 	.ml-toast__title {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-toast-title-font-size);
+		font-weight: var(--ml-toast-title-font-weight);
+		color: var(--ml-toast-title-color);
+		line-height: var(--ml-toast-title-line-height);
 	}
 
 	.ml-toast__message {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
-		margin-top: var(--ml-space-1);
+		font-size: var(--ml-toast-message-font-size);
+		color: var(--ml-toast-message-color);
+		line-height: var(--ml-toast-message-line-height);
+		margin-top: var(--ml-toast-message-margin-top);
 	}
 
 	.ml-toast__title + .ml-toast__message {
-		margin-top: var(--ml-space-1);
+		margin-top: var(--ml-toast-message-margin-top);
 	}
 
 	.ml-toast__dismiss {
@@ -82,13 +125,13 @@ export const toastStyles = () => css `
 		padding: 0;
 		background: none;
 		border: none;
-		border-radius: var(--ml-radius-sm);
+		border-radius: var(--ml-toast-dismiss-border-radius);
 		cursor: pointer;
-		color: var(--ml-color-text-tertiary);
-		transition: color var(--ml-duration-150) var(--ml-ease-in-out);
+		color: var(--ml-toast-dismiss-color);
+		transition: color var(--ml-toast-transition-duration) var(--ml-toast-transition-easing);
 	}
 
 	.ml-toast__dismiss:hover {
-		color: var(--ml-color-text);
+		color: var(--ml-toast-dismiss-hover-color);
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAgW9B,CAAC"}
+{"version":3,"file":"autocomplete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAwb9B,CAAC"}

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

@@ -5,6 +5,92 @@ export const autocompleteStyles = () => css `
 		width: 100%;
 		min-width: 0;
 		box-sizing: border-box;
+
+		/* --- Label --- */
+		--ml-autocomplete-label-font-size: var(--ml-text-sm);
+		--ml-autocomplete-label-font-weight: var(--ml-font-medium);
+		--ml-autocomplete-label-color: var(--ml-color-text-secondary);
+		--ml-autocomplete-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-autocomplete-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-autocomplete-bg: var(--ml-color-surface);
+		--ml-autocomplete-border-width: var(--ml-border);
+		--ml-autocomplete-border-color: var(--ml-color-border);
+		--ml-autocomplete-border-radius: var(--ml-radius);
+		--ml-autocomplete-color: var(--ml-color-text);
+		--ml-autocomplete-font-family: var(--ml-font-sans);
+		--ml-autocomplete-font-size: var(--ml-text-sm);
+		--ml-autocomplete-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-autocomplete-gap: var(--ml-space-2);
+		--ml-autocomplete-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-autocomplete-focus-border-color: var(--ml-color-primary);
+		--ml-autocomplete-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-autocomplete-error-border-color: var(--ml-color-danger);
+		--ml-autocomplete-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-autocomplete-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-autocomplete-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-autocomplete-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-autocomplete-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Icons --- */
+		--ml-autocomplete-icon-color: var(--ml-color-text-muted);
+
+		/* --- Clear button --- */
+		--ml-autocomplete-clear-color: var(--ml-color-text-muted);
+		--ml-autocomplete-clear-hover-color: var(--ml-color-text);
+		--ml-autocomplete-clear-hover-bg: var(--ml-color-surface-raised);
+
+		/* --- Dropdown --- */
+		--ml-autocomplete-dropdown-bg: var(--ml-color-surface);
+		--ml-autocomplete-dropdown-border-color: var(--ml-color-border);
+		--ml-autocomplete-dropdown-border-radius: var(--ml-radius);
+		--ml-autocomplete-dropdown-shadow: var(--ml-shadow-lg);
+		--ml-autocomplete-dropdown-max-height: 280px;
+		--ml-autocomplete-dropdown-padding: var(--ml-space-1-5);
+
+		/* --- Option --- */
+		--ml-autocomplete-option-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-autocomplete-option-border-radius: var(--ml-radius-sm);
+		--ml-autocomplete-option-font-size: var(--ml-text-sm);
+		--ml-autocomplete-option-font-weight: var(--ml-font-medium);
+		--ml-autocomplete-option-color: var(--ml-color-text);
+		--ml-autocomplete-option-hover-bg: var(--ml-color-surface-raised);
+		--ml-autocomplete-option-selected-bg: var(--ml-color-primary-subtle);
+		--ml-autocomplete-option-disabled-color: var(--ml-color-text-muted);
+		--ml-autocomplete-option-check-color: var(--ml-color-primary);
+		--ml-autocomplete-option-subtitle-font-size: var(--ml-text-xs);
+		--ml-autocomplete-option-subtitle-color: var(--ml-color-text-muted);
+
+		/* --- Tag (multi-select) --- */
+		--ml-autocomplete-tag-height: 20px;
+		--ml-autocomplete-tag-border-radius: var(--ml-radius-full);
+		--ml-autocomplete-tag-border-color: var(--ml-color-border);
+		--ml-autocomplete-tag-bg: var(--ml-color-surface);
+		--ml-autocomplete-tag-font-size: var(--ml-text-xs);
+		--ml-autocomplete-tag-font-weight: var(--ml-font-medium);
+		--ml-autocomplete-tag-color: var(--ml-color-text);
+		--ml-autocomplete-tag-remove-color: var(--ml-color-text-secondary);
+		--ml-autocomplete-tag-remove-hover-color: var(--ml-color-text);
+		--ml-autocomplete-tag-remove-hover-bg: var(--ml-color-surface-raised);
+
+		/* --- Hint --- */
+		--ml-autocomplete-hint-color: var(--ml-color-text-muted);
+		--ml-autocomplete-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-autocomplete-transition-duration: var(--ml-duration-150);
+		--ml-autocomplete-transition-easing: var(--ml-ease-in-out);
 	}
 
 	*,
@@ -26,55 +112,57 @@ export const autocompleteStyles = () => css `
 	}
 
 	.ml-autocomplete__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-autocomplete-label-font-size);
+		font-weight: var(--ml-autocomplete-label-font-weight);
+		color: var(--ml-autocomplete-label-color);
+		line-height: var(--ml-autocomplete-label-line-height);
 	}
 
 	.ml-autocomplete__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-autocomplete-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
 	.ml-autocomplete__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-autocomplete-gap);
 		width: 100%;
 		max-width: 100%;
 		overflow: hidden;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius);
+		padding: var(--ml-autocomplete-padding);
+		background-color: var(--ml-autocomplete-bg);
+		border: var(--ml-autocomplete-border-width) solid var(--ml-autocomplete-border-color);
+		border-radius: var(--ml-autocomplete-border-radius);
 		box-shadow: none;
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
+		color: var(--ml-autocomplete-color);
+		font-family: var(--ml-autocomplete-font-family);
+		font-size: var(--ml-autocomplete-font-size);
 		cursor: text;
 		text-align: left;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-autocomplete-transition-duration) var(--ml-autocomplete-transition-easing),
+			box-shadow var(--ml-autocomplete-transition-duration) var(--ml-autocomplete-transition-easing);
 	}
 
 	.ml-autocomplete:not(.ml-autocomplete--disabled) .ml-autocomplete__trigger:hover {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-autocomplete-hover-border-color);
 	}
 
 	.ml-autocomplete__trigger:focus-within {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-autocomplete-focus-border-color);
+		box-shadow: var(--ml-autocomplete-focus-shadow);
 	}
 
 	.ml-autocomplete--disabled .ml-autocomplete__trigger {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-autocomplete-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-disabled-color);
 	}
 
 	.ml-autocomplete__search-icon {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-icon-color);
 		flex-shrink: 0;
 		height: 20px;
 		display: flex;
@@ -89,17 +177,17 @@ export const autocompleteStyles = () => css `
 		outline: none;
 		background: transparent;
 		font: inherit;
-		color: var(--ml-color-text);
+		color: var(--ml-autocomplete-color);
 		padding: 0;
 		line-height: 20px;
 	}
 
 	.ml-autocomplete__input::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-placeholder-color);
 	}
 
 	.ml-autocomplete__input:disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-disabled-color);
 		cursor: not-allowed;
 	}
 
@@ -107,20 +195,20 @@ export const autocompleteStyles = () => css `
 		border: none;
 		background: transparent;
 		padding: 2px;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-clear-color);
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 		border-radius: var(--ml-radius-full);
-		transition: color var(--ml-duration-100) var(--ml-ease-in-out),
-			background-color var(--ml-duration-100) var(--ml-ease-in-out);
+		transition: color var(--ml-duration-100) var(--ml-autocomplete-transition-easing),
+			background-color var(--ml-duration-100) var(--ml-autocomplete-transition-easing);
 	}
 
 	.ml-autocomplete__clear:hover {
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-surface-raised);
+		color: var(--ml-autocomplete-clear-hover-color);
+		background-color: var(--ml-autocomplete-clear-hover-bg);
 	}
 
 	/* Multi-mode styles */
@@ -139,13 +227,13 @@ export const autocompleteStyles = () => css `
 		align-items: center;
 		gap: var(--ml-space-1);
 		padding: 0 var(--ml-space-1-5);
-		height: 20px;
-		border-radius: var(--ml-radius-full);
-		border: var(--ml-border) solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		height: var(--ml-autocomplete-tag-height);
+		border-radius: var(--ml-autocomplete-tag-border-radius);
+		border: var(--ml-autocomplete-border-width) solid var(--ml-autocomplete-tag-border-color);
+		background-color: var(--ml-autocomplete-tag-bg);
+		font-size: var(--ml-autocomplete-tag-font-size);
+		font-weight: var(--ml-autocomplete-tag-font-weight);
+		color: var(--ml-autocomplete-tag-color);
 		line-height: 1;
 		white-space: nowrap;
 		max-width: 100%;
@@ -162,7 +250,7 @@ export const autocompleteStyles = () => css `
 	.ml-autocomplete__tag-avatar {
 		width: 14px;
 		height: 14px;
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-autocomplete-tag-border-radius);
 		object-fit: cover;
 		margin-left: -2px;
 	}
@@ -173,20 +261,20 @@ export const autocompleteStyles = () => css `
 		padding: 2px;
 		margin-left: var(--ml-space-0-5);
 		margin-right: -4px;
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-autocomplete-tag-remove-color);
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		border-radius: var(--ml-radius-full);
-		transition: color var(--ml-duration-100) var(--ml-ease-in-out),
-			background-color var(--ml-duration-100) var(--ml-ease-in-out);
+		border-radius: var(--ml-autocomplete-tag-border-radius);
+		transition: color var(--ml-duration-100) var(--ml-autocomplete-transition-easing),
+			background-color var(--ml-duration-100) var(--ml-autocomplete-transition-easing);
 	}
 
 	.ml-autocomplete__tag-remove:hover {
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-surface-raised);
+		color: var(--ml-autocomplete-tag-remove-hover-color);
+		background-color: var(--ml-autocomplete-tag-remove-hover-bg);
 	}
 
 	/* Dropdown */
@@ -195,13 +283,13 @@ export const autocompleteStyles = () => css `
 		inset: unset;
 		margin: 0;
 		z-index: 50;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-lg);
-		max-height: 280px;
+		background-color: var(--ml-autocomplete-dropdown-bg);
+		border: var(--ml-autocomplete-border-width) solid var(--ml-autocomplete-dropdown-border-color);
+		border-radius: var(--ml-autocomplete-dropdown-border-radius);
+		box-shadow: var(--ml-autocomplete-dropdown-shadow);
+		max-height: var(--ml-autocomplete-dropdown-max-height);
 		overflow-y: auto;
-		padding: var(--ml-space-1-5);
+		padding: var(--ml-autocomplete-dropdown-padding);
 		display: flex;
 		flex-direction: column;
 		gap: var(--ml-space-1);
@@ -212,18 +300,18 @@ export const autocompleteStyles = () => css `
 	}
 
 	.ml-autocomplete__empty {
-		padding: var(--ml-space-2) var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		padding: var(--ml-autocomplete-option-padding);
+		font-size: var(--ml-autocomplete-option-font-size);
+		color: var(--ml-autocomplete-placeholder-color);
 	}
 
 	.ml-autocomplete__loading {
 		padding: var(--ml-space-3) var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-autocomplete-option-font-size);
+		color: var(--ml-autocomplete-placeholder-color);
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-autocomplete-gap);
 		justify-content: center;
 	}
 
@@ -231,40 +319,40 @@ export const autocompleteStyles = () => css `
 	.ml-autocomplete__option {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-3);
-		border-radius: var(--ml-radius-sm);
+		gap: var(--ml-autocomplete-gap);
+		padding: var(--ml-autocomplete-option-padding);
+		border-radius: var(--ml-autocomplete-option-border-radius);
 		cursor: pointer;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
-		transition: background-color var(--ml-duration-100) var(--ml-ease-in-out);
+		font-size: var(--ml-autocomplete-option-font-size);
+		font-weight: var(--ml-autocomplete-option-font-weight);
+		color: var(--ml-autocomplete-option-color);
+		transition: background-color var(--ml-duration-100) var(--ml-autocomplete-transition-easing);
 	}
 
 	.ml-autocomplete__option:hover:not(.ml-autocomplete__option--disabled) {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-autocomplete-option-hover-bg);
 	}
 
 	.ml-autocomplete__option--focused {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-autocomplete-option-hover-bg);
 	}
 
 	.ml-autocomplete__option--selected {
-		background-color: var(--ml-color-primary-subtle);
+		background-color: var(--ml-autocomplete-option-selected-bg);
 	}
 
 	.ml-autocomplete__option--selected:hover:not(.ml-autocomplete__option--disabled) {
-		background-color: var(--ml-color-primary-subtle);
+		background-color: var(--ml-autocomplete-option-selected-bg);
 	}
 
 	.ml-autocomplete__option--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-option-disabled-color);
 		cursor: not-allowed;
 	}
 
 	.ml-autocomplete__option-icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-icon-color);
 	}
 
 	.ml-autocomplete__option-avatar {
@@ -276,7 +364,7 @@ export const autocompleteStyles = () => css `
 	}
 
 	.ml-autocomplete__option--selected .ml-autocomplete__option-icon {
-		color: var(--ml-color-primary);
+		color: var(--ml-autocomplete-option-check-color);
 	}
 
 	.ml-autocomplete__option-content {
@@ -294,9 +382,9 @@ export const autocompleteStyles = () => css `
 	}
 
 	.ml-autocomplete__option-subtitle {
-		font-size: var(--ml-text-xs);
+		font-size: var(--ml-autocomplete-option-subtitle-font-size);
 		font-weight: var(--ml-font-normal);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-option-subtitle-color);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -304,31 +392,31 @@ export const autocompleteStyles = () => css `
 
 	.ml-autocomplete__option-check {
 		flex-shrink: 0;
-		color: var(--ml-color-primary);
+		color: var(--ml-autocomplete-option-check-color);
 		margin-left: auto;
 	}
 
 	/* Hint / Error */
 	.ml-autocomplete__hint,
 	.ml-autocomplete__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-autocomplete-hint-font-size);
+		line-height: var(--ml-autocomplete-label-line-height);
 	}
 
 	.ml-autocomplete__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-autocomplete-hint-color);
 	}
 
 	.ml-autocomplete__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-autocomplete-error-color);
 	}
 
 	.ml-autocomplete--error .ml-autocomplete__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-autocomplete-error-border-color);
 	}
 
 	.ml-autocomplete--error .ml-autocomplete__trigger:focus-within {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-autocomplete-error-focus-shadow);
 	}
 
 	/* Size variants */

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

@@ -1 +1 @@
-{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA+NxB,CAAC"}
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAwPxB,CAAC"}