fix(vwc-badge): element invisibility due to wrong z-indexing

common/context/src/partials/_theme.scss

@@ -1,8 +1,10 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-foundation/scss/variable-names/color-base-variable-names' as color-base;
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
-	$connotations: success alert warning info announcement
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation/variables' as connotation-variables;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' with (
+	$connotations-set: success alert warning info announcement,
+	$selector: 'blockquote#{connotation-variables.$compound-placeholder}'
 );
 @use 'variables';
 
@@ -12,10 +14,10 @@ body {
 }
 
 #{variables.$vivid-scope-selector} {
-	@include color-connotation-mixins.connotations-context(
-		'blockquote#{color-connotation-mixins.$connotation-placeholder}',
-		'info'
-	);
+
+	@include color-connotation.connotations-main;
+	@include color-connotation.connotations-main-default(info);
+
 	a {
 		color: var(
 			#{scheme-variables.$vvd-color-cta-70}

common/foundation/scss/mixins/_layout-mixins.scss

@@ -17,23 +17,20 @@ $all-layouts: (
 	ghost: 'ghost',
 );
 
-$bg: var(#{color-semantic.$vvd-color-connotation});
-
 %filled {
-	#{$_prefix}background-color: #{$bg};
+	#{$_prefix}background-color: var(#{color-semantic.$vvd-color-connotation});
 	#{$_prefix}color: var(#{color-semantic.$vvd-color-on-connotation});
 }
 
 %outlined {
 	#{$_prefix}background-color: transparent;
-	#{$_prefix}border: 1px solid #{$bg};
-	#{$_prefix}color: #{$bg};
+	#{$_prefix}border: 1px solid var(#{color-semantic.$vvd-color-connotation});
+	#{$_prefix}color: var(#{color-semantic.$vvd-color-connotation});
 }
 
 %soft {
-	#{$_prefix}background-color: #{$bg};
+	#{$_prefix}background-color: var(#{color-semantic.$vvd-color-connotation}-soft);
 	#{$_prefix}color: var(#{scheme-variables.$vvd-color-on-base});
-	#{$_prefix}opaque: 20;
 }
 
 %text,

common/foundation/scss/mixins/color-connotation/_color-connotation-decorative.mixin.scss

@@ -0,0 +1,30 @@
+@use 'sass:selector';
+
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '../../variable-names/color-semantic-variable-names' as color-semantic;
+@use '../../functions';
+@use 'variables';
+
+$_connotations-definition: (
+	pacific: linear-gradient(to right, var(#{scheme-variables.$vvd-color-info-30}), var(#{scheme-variables.$vvd-color-cta-70})),
+);
+
+// override to apply relevance
+$connotations-decorative-set: predefined-connotations.$connotations-decorative-set !default;
+$selector: variables.$selector !default;
+
+@mixin connotations-decorative {
+	@each $name, $value in functions.pick-map($connotations-decorative-set, $_connotations-definition) {
+		$compound: '[connotation="#{$name}" i]';
+
+		$local-selector: selector.replace(
+			#{$selector},
+			#{variables.$compound-placeholder},
+			#{$compound}
+		);
+
+		#{$local-selector} {
+			#{color-semantic.$vvd-color-connotation}: $value;
+		}
+	}
+}

common/foundation/scss/mixins/color-connotation/_color-connotation-main.mixin.scss

@@ -0,0 +1,57 @@
+@use 'sass:selector';
+
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '../../variable-names/color-semantic-variable-names' as color-semantic;
+@use '../../functions';
+@use 'predefined-connotations';
+@use 'variables';
+
+$_connotations-definition: (
+	primary: 'primary',
+	cta: 'cta',
+	success: 'success',
+	alert: 'alert',
+	warning: 'warning',
+	info: 'info',
+	announcement: 'announcement',
+);
+
+// override to apply relevance
+$connotations-set: predefined-connotations.$connotations-set !default;
+$selector: variables.$selector !default;
+
+// selector can be altered by relevance
+@mixin connotations-main {
+	@each $name in functions.pick-list($connotations-set, $_connotations-definition) {
+		$compound: '[connotation="#{$name}" i]';
+
+		$local-selector: selector.replace(
+			#{$selector},
+			#{variables.$compound-placeholder},
+			#{$compound}
+		);
+
+		#{$local-selector} {
+			@include connotation-main-variables($name);
+		}
+	}
+}
+
+@mixin connotations-main-default($name) {
+	$compound: ':not([connotation])';
+
+	$local-selector: selector.replace(
+		#{$selector},
+		#{variables.$compound-placeholder},
+		#{$compound}
+	);
+
+	#{$local-selector} {
+		@include connotation-main-variables($name);
+	}
+}
+
+@mixin connotation-main-variables($name) {
+	#{color-semantic.$vvd-color-connotation}: var(--vvd-color-#{$name});
+	#{color-semantic.$vvd-color-on-connotation}: var(--vvd-color-on-#{$name});
+}

common/foundation/scss/mixins/color-connotation/_color-connotation-shades.mixin.scss

@@ -0,0 +1,38 @@
+@use 'sass:selector';
+@use '../../functions';
+@use '../../variable-names/color-semantic-variable-names' as color-semantic;
+@use 'predefined-connotations';
+@use 'variables';
+
+$_connotations-definition: (
+	primary: (soft: neutral-20, accent: neutral-30),
+	cta: (soft: cta-20, accent: cta-60),
+	success: (soft: success-20, accent: success-60),
+	alert: (soft: alert-20, accent: alert-60),
+	warning: (soft: warning-20, accent: warning-60),
+	info: (soft: info-20, accent: info-60),
+	announcement: (soft: announcement-20, accent: announcement-60)
+);
+
+// override to apply relevance
+$connotations-set: predefined-connotations.$connotations-set !default;
+$selector: variables.$selector !default;
+
+@mixin connotations-shades {
+	@each $c_name, $value in functions.pick-map($connotations-set, $_connotations-definition) {
+		$compound: '[connotation="#{$c_name}" i]';
+
+		$local-selector: selector.replace(
+			#{$selector},
+			#{variables.$compound-placeholder},
+			#{$compound}
+		);
+
+		#{$local-selector} {
+			@each $s_name, $s_value in $value {
+				#{color-semantic.$vvd-color-connotation}-#{$s_name}: var(--vvd-color-#{$s_value});
+			}
+		}
+	}
+}
+

common/foundation/scss/mixins/color-connotation/_index.scss

@@ -0,0 +1,21 @@
+@use 'predefined-connotations';
+@use 'variables';
+
+$selector: variables.$selector !default;
+$connotations-set: predefined-connotations.$connotations-set !default;
+$connotations-decorative-set: predefined-connotations.$connotations-decorative-set !default;
+
+@forward 'color-connotation-main.mixin' show connotations-main, connotations-main-default with (
+	$connotations-set: $connotations-set,
+	$selector: $selector
+);
+
+@forward 'color-connotation-shades.mixin' show connotations-shades with (
+	$connotations-set: $connotations-set,
+	$selector: $selector
+);
+
+@forward 'color-connotation-decorative.mixin' show connotations-decorative with (
+	$connotations-decorative-set: $connotations-decorative-set,
+	$selector: $selector
+);

common/foundation/scss/mixins/color-connotation/_predefined-connotations.scss

@@ -0,0 +1,2 @@
+$connotations-set: primary cta success alert warning info announcement !default;
+$connotations-decorative-set: pacific !default;

common/foundation/scss/mixins/color-connotation/_variables.scss

@@ -0,0 +1,2 @@
+$compound-placeholder: '[compound]';
+$selector: ':host(#{$compound-placeholder})' !default;

components/badge/src/vwc-badge-base.ts

@@ -23,7 +23,7 @@ type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
 export class BadgeBase extends LitElement {
 	@property({ type: String, reflect: true })
-	connotation: BadgeConnotation = Connotation.Primary;
+	connotation?: BadgeConnotation;
 
 	@property({ type: String, reflect: true })
 	shape?: BadgeShape;