fix(appearance): changes in listitem appearance colors (VIV-1648)

libs/components/src/lib/data-grid/data-grid-cell.scss

@@ -2,7 +2,7 @@
 @use '../../../../../dist/libs/tokens/scss/size.variables' as size;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent cta,
-	$shades: primary primary-text primary-increment faint pale dim,
+	$shades: primary primary-text primary-increment firm soft faint pale dim,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/components/src/lib/data-grid/data-grid-row.scss

@@ -2,7 +2,7 @@
 @use 'partials/variables' as variables;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent cta,
-	$shades: primary primary-text primary-increment faint pale dim,
+	$shades: primary primary-text primary-increment firm faint soft pale dim,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/components/src/lib/menu-item/menu-item.scss

@@ -1,7 +1,7 @@
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent,
-	$shades: primary primary-text primary-increment faint soft pale dim,
+	$shades: primary primary-text primary-increment firm faint soft pale dim,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/components/src/lib/option/option.scss

@@ -3,7 +3,7 @@
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent,
-	$shades: primary primary-text primary-increment faint soft pale dim,
+	$shades: primary primary-text primary-increment firm faint soft pale dim,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/components/src/lib/time-picker/time-picker.scss

@@ -1,7 +1,7 @@
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent,
-	$shades: primary faint soft dim pale,
+	$shades: primary firm faint soft dim pale,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/components/src/shared/date-picker/date-picker-base.scss

@@ -1,7 +1,7 @@
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent,
-	$shades: primary faint soft dim pale,
+	$shades: primary firm faint soft dim pale,
 	$default: accent
 );
 @use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;

libs/shared/src/lib/sass/mixins/appearance/_variables.scss

@@ -35,7 +35,7 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: transparent,
 			outline: transparent,
 		),
@@ -77,7 +77,7 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(faint)}),
 			outline: transparent,
 		),
@@ -114,7 +114,7 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
 			fill: var(#{connotation.get-connotation-token(soft)}),
 			outline: transparent,
 		),
@@ -225,8 +225,8 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
-			fill: var(#{connotation.get-connotation-token(dim)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
+			fill: var(#{connotation.get-connotation-token(soft)}),
 			outline: transparent,
 		),
 	),
@@ -262,8 +262,8 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
-			fill: var(#{connotation.get-connotation-token(pale)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
+			fill: var(#{connotation.get-connotation-token(dim)}),
 			outline: transparent,
 		),
 	),
@@ -336,8 +336,8 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
-			fill: var(#{connotation.get-connotation-token(dim)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
+			fill: var(#{connotation.get-connotation-token(soft)}),
 			outline: transparent,
 		),
 	),
@@ -373,8 +373,8 @@ $states-mapping: (
 			outline: transparent,
 		),
 		listitem: (
-			text: var(#{connotation.get-connotation-token(primary)}),
-			fill: var(#{connotation.get-connotation-token(pale)}),
+			text: var(#{connotation.get-connotation-token(firm)}),
+			fill: var(#{connotation.get-connotation-token(dim)}),
 			outline: transparent,
 		),
 	),