@melodicdev/components 1.4.0 → 1.5.1

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

@@ -2,20 +2,57 @@ import { css } from '@melodicdev/core';
 export const tagStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* ── Tag: base ── */
+		--ml-tag-font: var(--ml-font-sans);
+		--ml-tag-font-weight: var(--ml-font-medium);
+		--ml-tag-radius: var(--ml-radius-md);
+		--ml-tag-border-width: var(--ml-border);
+		--ml-tag-border-color: var(--ml-color-border);
+		--ml-tag-bg: var(--ml-color-surface);
+		--ml-tag-color: var(--ml-color-text);
+
+		/* ── Tag: dot colors ── */
+		--ml-tag-dot-success: var(--ml-color-success);
+		--ml-tag-dot-warning: var(--ml-color-warning);
+		--ml-tag-dot-danger: var(--ml-color-danger);
+		--ml-tag-dot-info: var(--ml-color-info);
+		--ml-tag-dot-primary: var(--ml-color-primary);
+		--ml-tag-dot-secondary: var(--ml-color-secondary);
+
+		/* ── Tag: count ── */
+		--ml-tag-count-color: var(--ml-color-text-secondary);
+
+		/* ── Tag: close button ── */
+		--ml-tag-close-color: var(--ml-color-text-muted);
+		--ml-tag-close-hover-color: var(--ml-color-text-secondary);
+		--ml-tag-close-active-color: var(--ml-color-text);
+
+		/* ── Tag: checkbox ── */
+		--ml-tag-checkbox-border: var(--ml-color-border-strong);
+		--ml-tag-checkbox-bg: var(--ml-color-surface);
+		--ml-tag-checkbox-checked-bg: var(--ml-color-primary);
+		--ml-tag-checkbox-checked-border: var(--ml-color-primary);
+		--ml-tag-checkbox-hover-border: var(--ml-color-primary);
+		--ml-tag-checkbox-checked-hover-bg: var(--ml-color-primary-hover);
+		--ml-tag-checkbox-checked-hover-border: var(--ml-color-primary-hover);
+
+		/* ── Tag: disabled ── */
+		--ml-tag-disabled-opacity: 0.5;
 	}
 
 	.ml-tag {
 		display: inline-flex;
 		align-items: center;
 		gap: var(--ml-space-1-5);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
+		font-family: var(--ml-tag-font);
+		font-weight: var(--ml-tag-font-weight);
 		line-height: 1;
 		white-space: nowrap;
-		border-radius: var(--ml-radius-md);
-		border: var(--ml-border) solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
-		color: var(--ml-color-text);
+		border-radius: var(--ml-tag-radius);
+		border: var(--ml-tag-border-width) solid var(--ml-tag-border-color);
+		background-color: var(--ml-tag-bg);
+		color: var(--ml-tag-color);
 	}
 
 	/* Sizes */
@@ -48,27 +85,27 @@ export const tagStyles = () => css `
 	}
 
 	.ml-tag__dot--success {
-		background-color: var(--ml-color-success);
+		background-color: var(--ml-tag-dot-success);
 	}
 
 	.ml-tag__dot--warning {
-		background-color: var(--ml-color-warning);
+		background-color: var(--ml-tag-dot-warning);
 	}
 
 	.ml-tag__dot--danger {
-		background-color: var(--ml-color-danger);
+		background-color: var(--ml-tag-dot-danger);
 	}
 
 	.ml-tag__dot--info {
-		background-color: var(--ml-color-info);
+		background-color: var(--ml-tag-dot-info);
 	}
 
 	.ml-tag__dot--primary {
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-tag-dot-primary);
 	}
 
 	.ml-tag__dot--secondary {
-		background-color: var(--ml-color-secondary);
+		background-color: var(--ml-tag-dot-secondary);
 	}
 
 	/* Avatar */
@@ -109,8 +146,8 @@ export const tagStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		font-size: inherit;
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
+		font-weight: var(--ml-tag-font-weight);
+		color: var(--ml-tag-count-color);
 	}
 
 	/* Close button */
@@ -123,7 +160,7 @@ export const tagStyles = () => css `
 		margin-right: calc(var(--ml-space-1) * -1);
 		border: none;
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-tag-close-color);
 		cursor: pointer;
 		border-radius: var(--ml-radius-sm);
 		transition: color 0.15s ease;
@@ -131,11 +168,11 @@ export const tagStyles = () => css `
 	}
 
 	.ml-tag__close:hover {
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-tag-close-hover-color);
 	}
 
 	.ml-tag__close:active {
-		color: var(--ml-color-text);
+		color: var(--ml-tag-close-active-color);
 	}
 
 	/* Checkbox */
@@ -148,9 +185,9 @@ export const tagStyles = () => css `
 		padding: 0;
 		margin: 0;
 		margin-left: calc(var(--ml-space-0-5) * -1);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
+		border: var(--ml-tag-border-width) solid var(--ml-tag-checkbox-border);
 		border-radius: var(--ml-radius-sm);
-		background: var(--ml-color-surface);
+		background: var(--ml-tag-checkbox-bg);
 		cursor: pointer;
 		flex-shrink: 0;
 		transition: background-color 0.15s ease, border-color 0.15s ease;
@@ -173,22 +210,22 @@ export const tagStyles = () => css `
 	}
 
 	.ml-tag__checkbox--checked {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
+		background-color: var(--ml-tag-checkbox-checked-bg);
+		border-color: var(--ml-tag-checkbox-checked-border);
 	}
 
 	.ml-tag__checkbox:hover {
-		border-color: var(--ml-color-primary);
+		border-color: var(--ml-tag-checkbox-hover-border);
 	}
 
 	.ml-tag__checkbox--checked:hover {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-tag-checkbox-checked-hover-bg);
+		border-color: var(--ml-tag-checkbox-checked-hover-border);
 	}
 
 	/* Disabled state */
 	.ml-tag--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-tag-disabled-opacity);
 		pointer-events: none;
 	}
 `;

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

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

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

@@ -2,6 +2,30 @@ import { css } from '@melodicdev/core';
 export const alertStyles = () => css `
 	:host {
 		display: block;
+
+		/* Spacing */
+		--ml-alert-gap: var(--ml-space-3);
+		--ml-alert-padding: var(--ml-space-4);
+		--ml-alert-border-radius: var(--ml-radius-lg);
+
+		/* Typography */
+		--ml-alert-title-font-weight: var(--ml-font-semibold);
+		--ml-alert-title-font-size: var(--ml-text-sm);
+		--ml-alert-title-margin-bottom: var(--ml-space-1);
+		--ml-alert-message-font-size: var(--ml-text-sm);
+		--ml-alert-message-line-height: var(--ml-leading-relaxed);
+
+		/* Icon */
+		--ml-alert-icon-size: 1.25rem;
+
+		/* Dismiss button */
+		--ml-alert-dismiss-border-radius: var(--ml-radius-sm);
+		--ml-alert-dismiss-opacity: 0.5;
+		--ml-alert-dismiss-hover-opacity: 1;
+
+		/* Transition */
+		--ml-alert-transition-duration: var(--ml-duration-150);
+		--ml-alert-transition-easing: var(--ml-ease-in-out);
 	}
 
 	:host([hidden]) {
@@ -10,9 +34,9 @@ export const alertStyles = () => css `
 
 	.ml-alert {
 		display: flex;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-4);
-		border-radius: var(--ml-radius-lg);
+		gap: var(--ml-alert-gap);
+		padding: var(--ml-alert-padding);
+		border-radius: var(--ml-alert-border-radius);
 		border: var(--ml-border) solid transparent;
 	}
 
@@ -64,12 +88,12 @@ export const alertStyles = () => css `
 	}
 
 	.ml-alert__icon ml-icon {
-		font-size: 1.25rem;
+		font-size: var(--ml-alert-icon-size);
 	}
 
 	.ml-alert__icon svg {
-		width: 1.25rem;
-		height: 1.25rem;
+		width: var(--ml-alert-icon-size);
+		height: var(--ml-alert-icon-size);
 	}
 
 	.ml-alert__content {
@@ -78,14 +102,14 @@ export const alertStyles = () => css `
 	}
 
 	.ml-alert__title {
-		font-weight: var(--ml-font-semibold);
-		font-size: var(--ml-text-sm);
-		margin-bottom: var(--ml-space-1);
+		font-weight: var(--ml-alert-title-font-weight);
+		font-size: var(--ml-alert-title-font-size);
+		margin-bottom: var(--ml-alert-title-margin-bottom);
 	}
 
 	.ml-alert__message {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-relaxed);
+		font-size: var(--ml-alert-message-font-size);
+		line-height: var(--ml-alert-message-line-height);
 	}
 
 	.ml-alert__dismiss {
@@ -96,21 +120,21 @@ export const alertStyles = () => css `
 		padding: 0;
 		background: none;
 		border: none;
-		border-radius: var(--ml-radius-sm);
+		border-radius: var(--ml-alert-dismiss-border-radius);
 		cursor: pointer;
 		color: currentColor;
-		opacity: 0.5;
+		opacity: var(--ml-alert-dismiss-opacity);
 		transition:
-			opacity var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+			opacity var(--ml-alert-transition-duration) var(--ml-alert-transition-easing),
+			background-color var(--ml-alert-transition-duration) var(--ml-alert-transition-easing);
 	}
 
 	.ml-alert__dismiss:hover {
-		opacity: 1;
+		opacity: var(--ml-alert-dismiss-hover-opacity);
 	}
 
 	.ml-alert__dismiss:focus-visible {
 		outline: none;
-		opacity: 1;
+		opacity: var(--ml-alert-dismiss-hover-opacity);
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"progress.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/progress.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqS1B,CAAC"}
+{"version":3,"file":"progress.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/progress.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA6V1B,CAAC"}

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

@@ -2,6 +2,59 @@ import { css } from '@melodicdev/core';
 export const progressStyles = () => css `
 	:host {
 		display: block;
+
+		/* ---- Linear ---- */
+
+		/* Track */
+		--ml-progress-track-color: var(--ml-color-surface-sunken);
+		--ml-progress-track-radius: var(--ml-radius-full);
+		/* Fill */
+		--ml-progress-fill-color: var(--ml-color-primary);
+		--ml-progress-fill-radius: var(--ml-radius-full);
+
+		/* Label / value text */
+		--ml-progress-label-font-size: var(--ml-text-sm);
+		--ml-progress-label-font-weight: var(--ml-font-medium);
+		--ml-progress-label-color: var(--ml-color-text);
+
+		/* Floating tooltip */
+		--ml-progress-floating-font-size: var(--ml-text-xs);
+		--ml-progress-floating-font-weight: var(--ml-font-medium);
+		--ml-progress-floating-color: var(--ml-color-text-inverse);
+		--ml-progress-floating-bg: var(--ml-color-text);
+		--ml-progress-floating-radius: var(--ml-radius-md);
+		--ml-progress-floating-padding-y: var(--ml-space-1);
+		--ml-progress-floating-padding-x: var(--ml-space-2);
+
+		/* Spacing */
+		--ml-progress-header-margin-bottom: var(--ml-space-2);
+		--ml-progress-value-bottom-margin-top: var(--ml-space-2);
+		--ml-progress-bar-row-gap: var(--ml-space-3);
+
+		/* Transition */
+		--ml-progress-transition-duration: var(--ml-duration-300);
+		--ml-progress-transition-easing: var(--ml-ease-out);
+
+		/* ---- Circle ---- */
+
+		--ml-progress-circle-track-color: var(--ml-color-surface-sunken);
+		--ml-progress-circle-fill-color: var(--ml-color-primary);
+		--ml-progress-circle-value-font-weight: var(--ml-font-semibold);
+		--ml-progress-circle-value-color: var(--ml-color-text);
+		--ml-progress-circle-label-font-size: var(--ml-text-xs);
+		--ml-progress-circle-label-color: var(--ml-color-text-muted);
+		--ml-progress-circle-label-margin-top: var(--ml-space-0-5);
+
+		/* ---- Half circle ---- */
+
+		--ml-progress-half-track-color: var(--ml-color-surface-sunken);
+		--ml-progress-half-fill-color: var(--ml-color-primary);
+		--ml-progress-half-value-font-weight: var(--ml-font-semibold);
+		--ml-progress-half-value-color: var(--ml-color-text);
+		--ml-progress-half-label-font-size: var(--ml-text-xs);
+		--ml-progress-half-label-color: var(--ml-color-text-muted);
+		--ml-progress-half-label-margin-top: var(--ml-space-0-5);
+		--ml-progress-half-center-padding-bottom: var(--ml-space-1);
 	}
 
 	/* ===================== LINEAR ===================== */
@@ -10,31 +63,31 @@ export const progressStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: var(--ml-space-2);
+		margin-bottom: var(--ml-progress-header-margin-bottom);
 	}
 
 	.ml-progress__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		font-size: var(--ml-progress-label-font-size);
+		font-weight: var(--ml-progress-label-font-weight);
+		color: var(--ml-progress-label-color);
 	}
 
 	.ml-progress__value {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		font-size: var(--ml-progress-label-font-size);
+		font-weight: var(--ml-progress-label-font-weight);
+		color: var(--ml-progress-label-color);
 	}
 
 	.ml-progress__value--bottom {
 		display: block;
-		margin-top: var(--ml-space-2);
+		margin-top: var(--ml-progress-value-bottom-margin-top);
 	}
 
 	/* Bar row for label-right layout */
 	.ml-progress__bar-row {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-3);
+		gap: var(--ml-progress-bar-row-gap);
 	}
 
 	.ml-progress__track-wrapper {
@@ -45,8 +98,8 @@ export const progressStyles = () => css `
 
 	.ml-progress__track {
 		width: 100%;
-		background-color: var(--ml-color-surface-sunken);
-		border-radius: var(--ml-radius-full);
+		background-color: var(--ml-progress-track-color);
+		border-radius: var(--ml-progress-track-radius);
 		overflow: hidden;
 	}
 
@@ -64,8 +117,9 @@ export const progressStyles = () => css `
 
 	.ml-progress__fill {
 		height: 100%;
-		border-radius: var(--ml-radius-full);
-		transition: width var(--ml-duration-300) var(--ml-ease-out);
+		background-color: var(--ml-progress-fill-color);
+		border-radius: var(--ml-progress-fill-radius);
+		transition: width var(--ml-progress-transition-duration) var(--ml-progress-transition-easing);
 	}
 
 	/* Floating label */
@@ -89,12 +143,12 @@ export const progressStyles = () => css `
 	}
 
 	.ml-progress__floating-value {
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-inverse);
-		background-color: var(--ml-color-text);
-		padding: var(--ml-space-1) var(--ml-space-2);
-		border-radius: var(--ml-radius-md);
+		font-size: var(--ml-progress-floating-font-size);
+		font-weight: var(--ml-progress-floating-font-weight);
+		color: var(--ml-progress-floating-color);
+		background-color: var(--ml-progress-floating-bg);
+		padding: var(--ml-progress-floating-padding-y) var(--ml-progress-floating-padding-x);
+		border-radius: var(--ml-progress-floating-radius);
 		white-space: nowrap;
 		line-height: 1;
 	}
@@ -107,28 +161,28 @@ export const progressStyles = () => css `
 	}
 
 	.ml-progress__floating-arrow--down {
-		border-top: 5px solid var(--ml-color-text);
+		border-top: 5px solid var(--ml-progress-floating-bg);
 	}
 
 	.ml-progress__floating-arrow--up {
-		border-bottom: 5px solid var(--ml-color-text);
+		border-bottom: 5px solid var(--ml-progress-floating-bg);
 	}
 
 	/* Linear color variants */
 	.ml-progress--primary .ml-progress__fill {
-		background-color: var(--ml-color-primary);
+		--ml-progress-fill-color: var(--ml-color-primary);
 	}
 
 	.ml-progress--success .ml-progress__fill {
-		background-color: var(--ml-color-success);
+		--ml-progress-fill-color: var(--ml-color-success);
 	}
 
 	.ml-progress--warning .ml-progress__fill {
-		background-color: var(--ml-color-warning);
+		--ml-progress-fill-color: var(--ml-color-warning);
 	}
 
 	.ml-progress--error .ml-progress__fill {
-		background-color: var(--ml-color-error);
+		--ml-progress-fill-color: var(--ml-color-error);
 	}
 
 	/* ===================== CIRCLE ===================== */
@@ -145,11 +199,12 @@ export const progressStyles = () => css `
 	}
 
 	.ml-progress-circle__track {
-		stroke: var(--ml-color-surface-sunken);
+		stroke: var(--ml-progress-circle-track-color);
 	}
 
 	.ml-progress-circle__fill {
-		transition: stroke-dashoffset var(--ml-duration-300) var(--ml-ease-out);
+		stroke: var(--ml-progress-circle-fill-color);
+		transition: stroke-dashoffset var(--ml-progress-transition-duration) var(--ml-progress-transition-easing);
 	}
 
 	.ml-progress-circle__center {
@@ -164,29 +219,29 @@ export const progressStyles = () => css `
 
 	.ml-progress-circle--sm .ml-progress-circle__value {
 		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-circle-value-font-weight);
+		color: var(--ml-progress-circle-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-circle--md .ml-progress-circle__value {
 		font-size: var(--ml-text-lg);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-circle-value-font-weight);
+		color: var(--ml-progress-circle-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-circle--lg .ml-progress-circle__value {
 		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-circle-value-font-weight);
+		color: var(--ml-progress-circle-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-circle__label {
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
-		margin-top: var(--ml-space-0-5);
+		font-size: var(--ml-progress-circle-label-font-size);
+		color: var(--ml-progress-circle-label-color);
+		margin-top: var(--ml-progress-circle-label-margin-top);
 		line-height: 1;
 	}
 
@@ -197,19 +252,19 @@ export const progressStyles = () => css `
 
 	/* Circle color variants */
 	.ml-progress-circle--primary .ml-progress-circle__fill {
-		stroke: var(--ml-color-primary);
+		--ml-progress-circle-fill-color: var(--ml-color-primary);
 	}
 
 	.ml-progress-circle--success .ml-progress-circle__fill {
-		stroke: var(--ml-color-success);
+		--ml-progress-circle-fill-color: var(--ml-color-success);
 	}
 
 	.ml-progress-circle--warning .ml-progress-circle__fill {
-		stroke: var(--ml-color-warning);
+		--ml-progress-circle-fill-color: var(--ml-color-warning);
 	}
 
 	.ml-progress-circle--error .ml-progress-circle__fill {
-		stroke: var(--ml-color-error);
+		--ml-progress-circle-fill-color: var(--ml-color-error);
 	}
 
 	/* ===================== HALF CIRCLE ===================== */
@@ -226,11 +281,12 @@ export const progressStyles = () => css `
 	}
 
 	.ml-progress-half__track {
-		stroke: var(--ml-color-surface-sunken);
+		stroke: var(--ml-progress-half-track-color);
 	}
 
 	.ml-progress-half__fill {
-		transition: stroke-dashoffset var(--ml-duration-300) var(--ml-ease-out);
+		stroke: var(--ml-progress-half-fill-color);
+		transition: stroke-dashoffset var(--ml-progress-transition-duration) var(--ml-progress-transition-easing);
 	}
 
 	.ml-progress-half__center {
@@ -241,34 +297,34 @@ export const progressStyles = () => css `
 		align-items: center;
 		justify-content: flex-end;
 		text-align: center;
-		padding-bottom: var(--ml-space-1);
+		padding-bottom: var(--ml-progress-half-center-padding-bottom);
 	}
 
 	.ml-progress-half--sm .ml-progress-half__value {
 		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-half-value-font-weight);
+		color: var(--ml-progress-half-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-half--md .ml-progress-half__value {
 		font-size: var(--ml-text-lg);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-half-value-font-weight);
+		color: var(--ml-progress-half-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-half--lg .ml-progress-half__value {
 		font-size: var(--ml-text-2xl);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-weight: var(--ml-progress-half-value-font-weight);
+		color: var(--ml-progress-half-value-color);
 		line-height: 1;
 	}
 
 	.ml-progress-half__label {
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
-		margin-top: var(--ml-space-0-5);
+		font-size: var(--ml-progress-half-label-font-size);
+		color: var(--ml-progress-half-label-color);
+		margin-top: var(--ml-progress-half-label-margin-top);
 		line-height: 1;
 	}
 
@@ -278,18 +334,18 @@ export const progressStyles = () => css `
 
 	/* Half circle color variants */
 	.ml-progress-half--primary .ml-progress-half__fill {
-		stroke: var(--ml-color-primary);
+		--ml-progress-half-fill-color: var(--ml-color-primary);
 	}
 
 	.ml-progress-half--success .ml-progress-half__fill {
-		stroke: var(--ml-color-success);
+		--ml-progress-half-fill-color: var(--ml-color-success);
 	}
 
 	.ml-progress-half--warning .ml-progress-half__fill {
-		stroke: var(--ml-color-warning);
+		--ml-progress-half-fill-color: var(--ml-color-warning);
 	}
 
 	.ml-progress-half--error .ml-progress-half__fill {
-		stroke: var(--ml-color-error);
+		--ml-progress-half-fill-color: var(--ml-color-error);
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/spinner.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAsEzB,CAAC"}
+{"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/spinner.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAsFzB,CAAC"}