CSS fallback is not properly formatted

[blackfalcon]

Please verify the version of auro-badge you have installed

@latest

Please describe the bug

While assisting a developer working on installing the auro-badge component it was discovered that the CSS variable fallbacks are incorrectly written in Sass causing the incorrect value to be output into CSS.

The code:

auro-badge/src/color.scss

Lines 94 to 99 in 7b2afb9

	@each $status, $tierType, $fallback in $owstatus {
	:host([#{$status}]) {
	--ds-auro-badge-container-color: var(--ds-color-tier-#{$tierType}-#{$status}, $fallback);
	--ds-auro-badge-border-color: var(--ds-color-tier-#{$tierType}-#{$status}, $fallback);
	}
	}

The output in the inspector:

Reproducing the error on the docsite

This issue is reproducible on the Auro docsite

Expected behavior

The Sass should be updated so that the $fallback variable is transformed into the desired hex value for the CSS.

What browsers are you seeing the problem on?

Chrome

Additional context

When constructing a CSS variable using Sass, it is important to remember that interpolation is currently required. E.g.

[auro-icon] {
  --ds-auro-icon-size: var(--ds-size-300, #{$ds-size-300});
}

Exit criteria

This issue can be closed once the areas that require interpolation have been addressed and the correct fallback value is reflected in the CSS versus the Sass variable reference.