@melodicdev/components 1.4.0 → 1.5.1

package/lib/components/forms/file-upload/file-upload.styles.js

@@ -3,6 +3,59 @@ export const fileUploadStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* --- Dropzone --- */
+		--ml-file-upload-dropzone-padding: var(--ml-space-6);
+		--ml-file-upload-dropzone-border-width: 2px;
+		--ml-file-upload-dropzone-border-color: var(--ml-color-border);
+		--ml-file-upload-dropzone-border-radius: var(--ml-radius-md);
+		--ml-file-upload-dropzone-bg: var(--ml-color-surface);
+		--ml-file-upload-dropzone-gap: var(--ml-space-3);
+		--ml-file-upload-dropzone-hover-border-color: var(--ml-color-primary);
+		--ml-file-upload-dropzone-hover-bg: var(--ml-color-surface-sunken);
+
+		/* --- Focus --- */
+		--ml-file-upload-focus-border-color: var(--ml-color-primary);
+		--ml-file-upload-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Icon --- */
+		--ml-file-upload-icon-size: 40px;
+		--ml-file-upload-icon-border-radius: var(--ml-radius-full);
+		--ml-file-upload-icon-bg: var(--ml-color-surface-sunken);
+		--ml-file-upload-icon-color: var(--ml-color-text-muted);
+
+		/* --- Label --- */
+		--ml-file-upload-label-font-size: var(--ml-text-sm);
+		--ml-file-upload-label-font-weight: var(--ml-font-semibold);
+		--ml-file-upload-label-color: var(--ml-color-primary);
+		--ml-file-upload-label-line-height: var(--ml-leading-tight);
+
+		/* --- Sublabel --- */
+		--ml-file-upload-sublabel-font-size: var(--ml-text-sm);
+		--ml-file-upload-sublabel-color: var(--ml-color-text-muted);
+		--ml-file-upload-sublabel-line-height: var(--ml-leading-tight);
+
+		/* --- Hint --- */
+		--ml-file-upload-hint-font-size: var(--ml-text-sm);
+		--ml-file-upload-hint-color: var(--ml-color-text-muted);
+
+		/* --- Error --- */
+		--ml-file-upload-error-font-size: var(--ml-text-sm);
+		--ml-file-upload-error-color: var(--ml-color-danger);
+		--ml-file-upload-error-border-color: var(--ml-color-danger);
+
+		/* --- Drag over --- */
+		--ml-file-upload-drag-icon-color: var(--ml-color-primary);
+		--ml-file-upload-drag-icon-bg: var(--ml-color-primary-subtle, rgba(59, 130, 246, 0.1));
+
+		/* --- Disabled --- */
+		--ml-file-upload-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-file-upload-disabled-border-color: var(--ml-color-border);
+		--ml-file-upload-disabled-opacity: 0.6;
+
+		/* --- Transition --- */
+		--ml-file-upload-transition-duration: var(--ml-duration-150);
+		--ml-file-upload-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-file-upload {
@@ -16,37 +69,37 @@ export const fileUploadStyles = () => css `
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-6) var(--ml-space-6);
-		border: 2px dashed var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-surface);
+		gap: var(--ml-file-upload-dropzone-gap);
+		padding: var(--ml-file-upload-dropzone-padding);
+		border: var(--ml-file-upload-dropzone-border-width) dashed var(--ml-file-upload-dropzone-border-color);
+		border-radius: var(--ml-file-upload-dropzone-border-radius);
+		background-color: var(--ml-file-upload-dropzone-bg);
 		cursor: pointer;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-file-upload-transition-duration) var(--ml-file-upload-transition-easing),
+			background-color var(--ml-file-upload-transition-duration) var(--ml-file-upload-transition-easing);
 	}
 
 	.ml-file-upload__dropzone:hover {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface-sunken);
+		border-color: var(--ml-file-upload-dropzone-hover-border-color);
+		background-color: var(--ml-file-upload-dropzone-hover-bg);
 	}
 
 	.ml-file-upload__dropzone:focus-visible {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-file-upload-focus-border-color);
+		box-shadow: var(--ml-file-upload-focus-shadow);
 	}
 
 	.ml-file-upload__icon {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 40px;
-		height: 40px;
-		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-surface-sunken);
-		color: var(--ml-color-text-muted);
+		width: var(--ml-file-upload-icon-size);
+		height: var(--ml-file-upload-icon-size);
+		border-radius: var(--ml-file-upload-icon-border-radius);
+		background-color: var(--ml-file-upload-icon-bg);
+		color: var(--ml-file-upload-icon-color);
 	}
 
 	.ml-file-upload__text {
@@ -58,16 +111,16 @@ export const fileUploadStyles = () => css `
 	}
 
 	.ml-file-upload__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-primary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-label-font-size);
+		font-weight: var(--ml-file-upload-label-font-weight);
+		color: var(--ml-file-upload-label-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	.ml-file-upload__sublabel {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-sublabel-font-size);
+		color: var(--ml-file-upload-sublabel-color);
+		line-height: var(--ml-file-upload-sublabel-line-height);
 	}
 
 	.ml-file-upload__input {
@@ -83,43 +136,43 @@ export const fileUploadStyles = () => css `
 	}
 
 	.ml-file-upload__hint {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-hint-font-size);
+		color: var(--ml-file-upload-hint-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	.ml-file-upload__error {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-danger);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-error-font-size);
+		color: var(--ml-file-upload-error-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	/* Drag over state */
 	.ml-file-upload--drag-over .ml-file-upload__dropzone {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface-sunken);
+		border-color: var(--ml-file-upload-dropzone-hover-border-color);
+		background-color: var(--ml-file-upload-dropzone-hover-bg);
 	}
 
 	.ml-file-upload--drag-over .ml-file-upload__icon {
-		color: var(--ml-color-primary);
-		background-color: var(--ml-color-primary-subtle, rgba(59, 130, 246, 0.1));
+		color: var(--ml-file-upload-drag-icon-color);
+		background-color: var(--ml-file-upload-drag-icon-bg);
 	}
 
 	/* Error state */
 	.ml-file-upload--error .ml-file-upload__dropzone {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-file-upload-error-border-color);
 	}
 
 	/* Disabled state */
 	.ml-file-upload--disabled .ml-file-upload__dropzone {
-		background-color: var(--ml-color-input-disabled-bg);
-		border-color: var(--ml-color-border);
+		background-color: var(--ml-file-upload-disabled-bg);
+		border-color: var(--ml-file-upload-disabled-border-color);
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--ml-file-upload-disabled-opacity);
 	}
 
 	.ml-file-upload--disabled .ml-file-upload__dropzone:hover {
-		border-color: var(--ml-color-border);
-		background-color: var(--ml-color-input-disabled-bg);
+		border-color: var(--ml-file-upload-disabled-border-color);
+		background-color: var(--ml-file-upload-disabled-bg);
 	}
 `;

package/lib/components/forms/form-field/form-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iDA6K3B,CAAC"}
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iDAwN3B,CAAC"}

package/lib/components/forms/form-field/form-field.styles.js

@@ -3,6 +3,49 @@ export const formFieldStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* --- Label --- */
+		--ml-form-field-label-font-size: var(--ml-text-sm);
+		--ml-form-field-label-font-weight: var(--ml-font-medium);
+		--ml-form-field-label-color: var(--ml-color-text-secondary);
+		--ml-form-field-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-form-field-required-color: var(--ml-color-danger);
+
+		/* --- Hint / Error --- */
+		--ml-form-field-hint-font-size: var(--ml-text-sm);
+		--ml-form-field-hint-color: var(--ml-color-text-muted);
+		--ml-form-field-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-form-field-disabled-label-color: var(--ml-color-text-muted);
+
+		/* --- Slotted input --- */
+		--ml-form-field-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-form-field-input-font-size: var(--ml-text-sm);
+		--ml-form-field-input-font-family: var(--ml-font-sans);
+		--ml-form-field-input-color: var(--ml-color-text);
+		--ml-form-field-input-bg: var(--ml-color-input-bg);
+		--ml-form-field-input-border-width: var(--ml-border);
+		--ml-form-field-input-border-color: var(--ml-color-border-strong);
+		--ml-form-field-input-border-radius: var(--ml-radius);
+		--ml-form-field-input-shadow: var(--ml-shadow-xs);
+		--ml-form-field-input-focus-border-color: var(--ml-color-primary);
+		--ml-form-field-input-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-form-field-input-placeholder-color: var(--ml-color-text-muted);
+		--ml-form-field-input-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-form-field-input-disabled-color: var(--ml-color-text-muted);
+		--ml-form-field-input-error-border-color: var(--ml-color-danger);
+		--ml-form-field-input-error-focus-shadow: var(--ml-shadow-ring-error);
+
+		/* --- Horizontal layout --- */
+		--ml-form-field-horizontal-gap: var(--ml-space-4);
+		--ml-form-field-horizontal-label-padding-top: var(--ml-space-2-5);
+
+		/* --- Transition --- */
+		--ml-form-field-transition-duration: var(--ml-duration-150);
+		--ml-form-field-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-form-field {
@@ -16,14 +59,14 @@ export const formFieldStyles = () => css `
 		display: grid;
 		grid-template-columns: minmax(100px, auto) 1fr;
 		grid-template-rows: auto auto;
-		gap: var(--ml-space-1-5) var(--ml-space-4);
+		gap: var(--ml-space-1-5) var(--ml-form-field-horizontal-gap);
 		align-items: start;
 	}
 
 	.ml-form-field--horizontal .ml-form-field__label {
 		grid-column: 1;
 		grid-row: 1;
-		padding-top: var(--ml-space-2-5);
+		padding-top: var(--ml-form-field-horizontal-label-padding-top);
 		text-align: right;
 	}
 
@@ -40,14 +83,14 @@ export const formFieldStyles = () => css `
 
 	/* Label */
 	.ml-form-field__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-form-field-label-font-size);
+		font-weight: var(--ml-form-field-label-font-weight);
+		color: var(--ml-form-field-label-color);
+		line-height: var(--ml-form-field-label-line-height);
 	}
 
 	.ml-form-field__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-form-field-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -60,21 +103,21 @@ export const formFieldStyles = () => css `
 	/* Hint and error messages */
 	.ml-form-field__hint,
 	.ml-form-field__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-form-field-hint-font-size);
+		line-height: var(--ml-form-field-label-line-height);
 	}
 
 	.ml-form-field__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-hint-color);
 	}
 
 	.ml-form-field__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-form-field-error-color);
 	}
 
 	/* Disabled state */
 	.ml-form-field--disabled .ml-form-field__label {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-disabled-label-color);
 	}
 
 	/* Size variants - Labels */
@@ -101,52 +144,52 @@ export const formFieldStyles = () => css `
 	::slotted(select),
 	::slotted(textarea) {
 		width: 100%;
-		padding: var(--ml-space-2-5) var(--ml-space-3-5);
-		font-size: var(--ml-text-sm);
-		font-family: var(--ml-font-sans);
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
+		padding: var(--ml-form-field-input-padding);
+		font-size: var(--ml-form-field-input-font-size);
+		font-family: var(--ml-form-field-input-font-family);
+		color: var(--ml-form-field-input-color);
+		background-color: var(--ml-form-field-input-bg);
+		border: var(--ml-form-field-input-border-width) solid var(--ml-form-field-input-border-color);
+		border-radius: var(--ml-form-field-input-border-radius);
+		box-shadow: var(--ml-form-field-input-shadow);
 		box-sizing: border-box;
 		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-form-field-transition-duration) var(--ml-form-field-transition-easing),
+			box-shadow var(--ml-form-field-transition-duration) var(--ml-form-field-transition-easing);
 	}
 
 	::slotted(input:focus),
 	::slotted(select:focus),
 	::slotted(textarea:focus) {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-form-field-input-focus-border-color);
+		box-shadow: var(--ml-form-field-input-focus-shadow);
 	}
 
 	::slotted(input::placeholder),
 	::slotted(textarea::placeholder) {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-input-placeholder-color);
 	}
 
 	::slotted(input:disabled),
 	::slotted(select:disabled),
 	::slotted(textarea:disabled) {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-form-field-input-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-input-disabled-color);
 	}
 
 	/* Error state for slotted inputs */
 	.ml-form-field--error ::slotted(input),
 	.ml-form-field--error ::slotted(select),
 	.ml-form-field--error ::slotted(textarea) {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-form-field-input-error-border-color);
 	}
 
 	.ml-form-field--error ::slotted(input:focus),
 	.ml-form-field--error ::slotted(select:focus),
 	.ml-form-field--error ::slotted(textarea:focus) {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-form-field-input-error-focus-shadow);
 	}
 
 	/* Size variants for slotted inputs */

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

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAiIvB,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAsLvB,CAAC"}

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

@@ -4,6 +4,57 @@ export const inputStyles = () => css `
 		display: block;
 		width: 100%;
 		min-width: 0;
+
+		/* --- Label --- */
+		--ml-input-label-font-size: var(--ml-text-sm);
+		--ml-input-label-font-weight: var(--ml-font-medium);
+		--ml-input-label-color: var(--ml-color-text-secondary);
+		--ml-input-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-input-required-color: var(--ml-color-danger);
+
+		/* --- Wrapper --- */
+		--ml-input-bg: var(--ml-color-input-bg);
+		--ml-input-border-width: var(--ml-border);
+		--ml-input-border-color: var(--ml-color-border-strong);
+		--ml-input-border-radius: var(--ml-radius);
+		--ml-input-shadow: var(--ml-shadow-xs);
+		--ml-input-hover-border-color: var(--ml-color-border);
+		--ml-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-input-gap: var(--ml-space-2);
+
+		/* --- Field --- */
+		--ml-input-color: var(--ml-color-text);
+		--ml-input-font-family: var(--ml-font-sans);
+		--ml-input-font-size: var(--ml-text-sm);
+		--ml-input-line-height: var(--ml-leading-normal);
+		--ml-input-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Focus --- */
+		--ml-input-focus-border-color: var(--ml-color-primary);
+		--ml-input-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-input-focus-inset-shadow: none;
+
+		/* --- Error --- */
+		--ml-input-error-border-color: var(--ml-color-danger);
+		--ml-input-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-input-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-input-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-input-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Hint --- */
+		--ml-input-hint-color: var(--ml-color-text-muted);
+		--ml-input-hint-font-size: var(--ml-text-sm);
+
+		/* --- Prefix / Suffix --- */
+		--ml-input-addon-color: var(--ml-color-text-muted);
+
+		/* --- Transition --- */
+		--ml-input-transition-duration: var(--ml-duration-150);
+		--ml-input-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-input {
@@ -13,32 +64,33 @@ export const inputStyles = () => css `
 	}
 
 	.ml-input__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-input-label-font-size);
+		font-weight: var(--ml-input-label-font-weight);
+		color: var(--ml-input-label-color);
+		line-height: var(--ml-input-label-line-height);
 	}
 
 	.ml-input__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-input-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
 	.ml-input__wrapper {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
+		gap: var(--ml-input-gap);
+		padding: var(--ml-input-padding);
+		background-color: var(--ml-input-bg);
+		border: var(--ml-input-border-width) solid var(--ml-input-border-color);
+		border-radius: var(--ml-input-border-radius);
+		box-shadow: var(--ml-input-shadow);
 		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-input-transition-duration) var(--ml-input-transition-easing),
+			box-shadow var(--ml-input-transition-duration) var(--ml-input-transition-easing);
 	}
 
 	.ml-input__wrapper:hover:not(.ml-input--disabled .ml-input__wrapper) {
-		border-color: var(--ml-color-border);
+		border-color: var(--ml-input-hover-border-color);
 	}
 
 	.ml-input__field {
@@ -46,10 +98,10 @@ export const inputStyles = () => css `
 		min-width: 0;
 		border: none;
 		background: transparent;
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
-		font-size: inherit;
-		line-height: var(--ml-leading-normal);
+		color: var(--ml-input-color);
+		font-family: var(--ml-input-font-family);
+		font-size: var(--ml-input-font-size);
+		line-height: var(--ml-input-line-height);
 	}
 
 	.ml-input__field:focus {
@@ -57,46 +109,47 @@ export const inputStyles = () => css `
 	}
 
 	.ml-input__field::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-placeholder-color);
 	}
 
 	.ml-input__field:disabled {
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-disabled-color);
 	}
 
 	.ml-input__hint,
 	.ml-input__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-input-hint-font-size);
+		line-height: var(--ml-input-label-line-height);
 	}
 
 	.ml-input__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-hint-color);
 	}
 
 	.ml-input__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-input-error-color);
 	}
 
 	.ml-input--focused .ml-input__wrapper {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-input-focus-border-color);
+		box-shadow: var(--ml-input-focus-shadow), var(--ml-input-focus-inset-shadow);
 	}
 
 	.ml-input--error .ml-input__wrapper {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-input-error-border-color);
 	}
 
 	.ml-input--error.ml-input--focused .ml-input__wrapper {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-input-error-focus-shadow);
 	}
 
 	.ml-input--disabled .ml-input__wrapper {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-input-disabled-bg);
 		cursor: not-allowed;
 	}
 
+	/* --- Size variants --- */
 	.ml-input--sm .ml-input__wrapper {
 		padding: var(--ml-space-2) var(--ml-space-3);
 	}
@@ -125,7 +178,7 @@ export const inputStyles = () => css `
 	::slotted([slot='suffix']) {
 		display: flex;
 		align-items: center;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-addon-color);
 		flex-shrink: 0;
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA8HvB,CAAC"}
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA6JvB,CAAC"}