fix(VBtnToggle): plain variant button opacity when selected

[SonTT19]

Description

fixes #20142

Markup:

<template>
  <v-container>
    <v-row>
      <v-col class="py-2" cols="12" sm="6">
        <p>Mandatory</p>
        <v-btn-toggle v-model="toggle_one">
          <v-btn value="eins">
            <v-icon>mdi-format-align-left</v-icon>
          </v-btn>

          <v-btn value="zwei">
            <v-icon>mdi-format-align-center</v-icon>
          </v-btn>

          <v-btn value="drei">
            <v-icon>mdi-format-align-right</v-icon>
          </v-btn>

          <v-btn value="vier">
            <v-icon>mdi-format-align-justify</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-col>

      <v-col class="py-2" cols="12" sm="6">
        <p>Mandatory</p>
        <v-btn-toggle v-model="toggle_one" variant="plain">
          <v-btn value="eins">
            <v-icon>mdi-format-align-left</v-icon>
          </v-btn>

          <v-btn value="zwei">
            <v-icon>mdi-format-align-center</v-icon>
          </v-btn>

          <v-btn value="drei">
            <v-icon>mdi-format-align-right</v-icon>
          </v-btn>

          <v-btn value="vier">
            <v-icon>mdi-format-align-justify</v-icon>
          </v-btn>
        </v-btn-toggle>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const toggle_one = ref('vier')
</script>

[yuwu9145]

The active state for plain variant should increase opacity & change colour

Adding back overlay background looks the same as "text" variant

          @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)

       &.v-btn--variant-plain
-        > .v-btn__overlay
-          display: block
+        opacity: 1

[SonTT19]

The active state for plain variant should increase opacity & change colour

Adding back overlay background looks the same as "text" variant

          @include tools.active-states('> .v-btn__overlay', $btn-toggle-selected-opacity)

       &.v-btn--variant-plain
-        > .v-btn__overlay
-          display: block
+        opacity: 1

I don't think we should remove the line display: block, cause it would not show the selected one

[yuwu9145]

I don't think we should remove the line display: block, cause it would not show the selected one

Plain variant shouldn't have shadow/background

https://play.vuetifyjs.com/#eNrtlT1vgzAQhv/KiSmR4iJVVQZEIlXq3g7dSgcHDurK2JY5UKIo/70GQ/pBqrZplCkLwu/dvcb3YPtpG1Q2DW+NuWpqDKIgJiyN5ITLRAHEmWgglbyqFkmQsVziGrgUhWIpKkILrcJSLetSwapghcUNc/EXQsVuwHA2T4LO6YsX4ZpYVa9IkER27ZLuMOe1pDh0aUNFw1akGOmikAgNK3WGsi3uhCQAN7G2TjBWlNxunBJZYYxEp+VcVi6ntxrMQKRauWiZCZZrW3Jifj0SczpYH4dd4W99fF9O4WTbNp7C6LWuSOSHu/PZqh/1HXfiAXIlsTmM8T065Z/sGm4FV9T/HRd050L3ILlQ37IbvnSMcIiMSO5L9kDdiSLUe2C0GB+4AD8P8PuapFCYnWy/6t7wr3v2WGBH4jkaxk+tbyXfyjj8cH+6YZU6jNSl4NpoS5D5ew623ivjxCOYTGGxhEmvAXjnCFQt5cyLu2n3smvn2LsGu1mX0j6e3wDn5ZNm

https://play.vuetifyjs.com/#eNp1j8EKAjEMRH+l5KzufakL+gUevFkPcYlQqNnQTYsg/rtt9aCwXkLyhhkypwfMcex2IpucCHqwSjcJqDQ4NsbmNYq0tR3jxIqeKX5QgxdlkzF6ZN06KGbPDkwfvUigQq4YZnIwHKpi9kl1YmO7Zvyfo3TXxZhjEZZT6vX7YSXvArb7KgbPFacQ2ji/ADZBVhg=