Fixed #6584 - AutoComplete is using token from the deprecated InputChips

apps/showcase/doc/autocomplete/MultipleDoc.vue

@@ -7,7 +7,7 @@
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,7 +25,7 @@ export default {
 <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
 <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
 `,
                 options: `
 <template>
@@ -34,7 +34,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
     </div>
 </template>
 
@@ -62,7 +62,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
 </template>
 

packages/primevue/src/autocomplete/style/AutoCompleteStyle.js

@@ -201,8 +201,8 @@ const theme = ({ dt }) => `
 }
 
 .p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
-    background: ${dt('inputchips.chip.focus.background')};
+    background: ${dt('autocomplete.chip.focus.background')};
-    color: ${dt('inputchips.chip.focus.color')};
+    color: ${dt('autocomplete.chip.focus.color')};
 }
 
 .p-autocomplete-input-chip {

packages/themes/src/presets/aura/autocomplete/index.js

@@ -75,6 +75,10 @@ export default {
     },
     colorScheme: {
         light: {
+            chip: {
+                focusBackground: '{surface.200}',
+                color: '{surface.800}'
+            },
             dropdown: {
                 background: '{surface.100}',
                 hoverBackground: '{surface.200}',
@@ -85,6 +89,10 @@ export default {
             }
         },
         dark: {
+            chip: {
+                focusBackground: '{surface.700}',
+                color: '{surface.0}'
+            },
             dropdown: {
                 background: '{surface.800}',
                 hoverBackground: '{surface.700}',

packages/themes/src/presets/lara/autocomplete/index.js

@@ -75,6 +75,10 @@ export default {
     },
     colorScheme: {
         light: {
+            chip: {
+                focusBackground: '{surface.200}',
+                color: '{surface.800}'
+            },
             dropdown: {
                 background: '{surface.50}',
                 hoverBackground: '{surface.100}',
@@ -85,6 +89,10 @@ export default {
             }
         },
         dark: {
+            chip: {
+                focusBackground: '{surface.700}',
+                color: '{surface.0}'
+            },
             dropdown: {
                 background: '{surface.800}',
                 hoverBackground: '{surface.700}',

packages/themes/src/presets/material/autocomplete/index.js

@@ -75,6 +75,10 @@ export default {
     },
     colorScheme: {
         light: {
+            chip: {
+                focusBackground: '{surface.300}',
+                color: '{surface.950}'
+            },
             dropdown: {
                 background: '{surface.100}',
                 hoverBackground: '{surface.200}',
@@ -85,6 +89,10 @@ export default {
             }
         },
         dark: {
+            chip: {
+                focusBackground: '{surface.600}',
+                color: '{surface.0}'
+            },
             dropdown: {
                 background: '{surface.800}',
                 hoverBackground: '{surface.700}',

packages/themes/src/presets/nora/autocomplete/index.js

@@ -79,12 +79,20 @@ export default {
     },
     colorScheme: {
         light: {
+            chip: {
+                focusBackground: '{surface.300}',
+                color: '{surface.900}'
+            },
             dropdown: {
                 hoverBackground: '{surface.200}',
                 activeBackground: '{surface.300}'
             }
         },
         dark: {
+            chip: {
+                focusBackground: '{surface.600}',
+                color: '{surface.0}'
+            },
             dropdown: {
                 hoverBackground: '{surface.700}',
                 activeBackground: '{surface.600}'