@each $color in (primary, danger, warning, success, info) {
	$prefix: '';
	@if $color != 'primary' {
		$prefix: 'signal-';
	}

	.bg-#{$color} {
		background-color: var(--#{$prefix + $color});
		color: var(--#{$prefix + $color}-contrast);
	}

	.color-#{$color} {
		color: var(--#{$prefix + $color});
	}

	.fill-#{$color} {
		fill: var(--#{$prefix + $color});
	}
}

@each $color in (norm, weak, strong) {
	.bg-#{$color} {
		background-color: var(--background-#{$color});
	}
}

@each $color in (norm, weak, hint, disabled, invert) {
	.color-#{$color} {
		color: var(--text-#{$color});
	}
}

.color-inherit {
	color: inherit;
}

.fill-currentColor {
	fill: currentColor;
}

@each $color in (primary, danger, warning, success, info) {
	$prefix: '';
	@if $color != 'primary' {
		$prefix: 'signal-';
	}

	.bg-#{$color} {
		background-color: var(--#{$prefix + $color});
		color: var(--#{$prefix + $color}-contrast);
	}

	.color-#{$color} {
		color: var(--#{$prefix + $color});
	}

	.fill-#{$color} {
		fill: var(--#{$prefix + $color});
	}
}

@each $color in (norm, weak, strong) {
	.bg-#{$color} {
		background-color: var(--background-#{$color});
	}
}

@each $color in (norm, weak, hint, disabled, invert) {
	.color-#{$color} {
		color: var(--text-#{$color});
	}
}

.color-inherit {
	color: inherit;

	&.link {
		&:hover,
		&:focus {
			color: inherit;
		}
	}
}

.fill-currentColor {
	fill: currentColor;
}

Fix links with color-inherit helper
Fix links with color-inherit helper
