Incorrect CSS variables for AutoComplete component

[fatihsolhan]

Hey everyone,

First off all, big thanks to the team for this awesome project! 🙏

I've run into an issue with the AutoComplete component. It seems like some CSS variables aren't being used as expected. I set --p-autocomplete-background and --p-autocomplete-filled-background, but it looks like the component is still using the --p-inputtext-* variables.

I'm not sure if this is intentional or if I'm doing something wrong, but I would appreciate your help on this.

Stackblitz: https://stackblitz.com/edit/atybs1?file=src%2FApp.vue
Screenshot:

Thanks

[j0rgedev]

Hello @fatihsolhan. In v4, you shouldn't set your custom styles like that since primevue relies on the new tokens architecture. So, if you want to customize your autocomplete component, you'll have to do it in a custom preset. Let me know if you need help with it 😁

[fatihsolhan]

Thank you @j0rgedev. I watched https://www.youtube.com/watch?v=J3KFw5sih98 and it was very helpful to understand the concept. I think what was I looking for was Scoped Tokens which is a great feature, thanks again to all of you 🥇

[fatihsolhan]

Hey @j0rgedev Unfortunately same issue happened with Scoped Tokens as well. See the demo project: https://stackblitz.com/edit/atybs1-swvfn3?file=src%2FApp.vue

The input inside AutoComplete is not using the design tokes provided in the documentation.

[j0rgedev]

Hello @fatihsolhan. You are absolutely right. This looks like a bug. It seems that the autocomplete tokens, such as the background color, should be passed to the InputText component, but they aren't. Could you please open an issue for this? I'll try to find a solution myself tonight, but once the issue is open, others can also contribute to solving it 😁

By the way, if you need a workaround, you can play with the autocomplete PT:

      <AutoComplete
        :dt="myAutoComplete"
        v-model="value2"
        inputId="in_label"
        :suggestions="items"
        @complete="search"
        :pt="{
          pcInputText: {
            root: {
              class: '!bg-red-500',
            },
          },
        }"
      />

[fatihsolhan]

Thank you for the workaround @j0rgedev 🙏
Here is the issue: primefaces/primevue#6828