fix(VBtnToggle): restructure styles

[johnleider]

Description

Allow manual override of btn color/size, improve state visual clarity. Slightly deters from spec in that the non-active buttons have a lower opacity, but greatly improves visual clarity when using anything other than the default styles.

Motivation and Context

fixes #7420

How Has This Been Tested?

visual

Markup:

// Paste your FULL Playground.vue here
<template>
  <div class="ma-5 pa-5">
    <v-card
      flat
      class="py-5"
    >
      <v-card-text>
        <v-layout
          column
          align-center
        >
          <v-btn-toggle
            v-model="toggle_exclusive"
            rounded
            multiple
            dark
          >
            <v-btn
              color="primary"
              value="a"
            >
              Option A
            </v-btn>
            <v-btn
              color="primary"
              value="b"
            >
              Option B
            </v-btn>
            <v-btn
              color="primary"
              value="c"
            >
              Option C
            </v-btn>
            <v-btn
              color="primary"
              value="d"
            >
              Option D
            </v-btn>
          </v-btn-toggle>
          <div class="my-5"></div>
          <v-btn-toggle
            v-model="toggle_exclusive"
            rounded
            multiple
            dark
          >
            <v-btn
              value="a"
              small
            >
              Option A
            </v-btn>
            <v-btn
              value="b"
              small
            >
              Option B
            </v-btn>
            <v-btn
              value="c"
              small
            >
              Option C
            </v-btn>
            <v-btn
              value="d"
              small
            >
              Option D
            </v-btn>
          </v-btn-toggle>
          <div class="my-5"></div>
          <v-btn-toggle
            v-model="toggle_exclusive"
            rounded
            multiple
            color="pink"
          >
            <v-btn
              value="a"
              large
            >
              Option A
            </v-btn>
            <v-btn
              value="b"
              large
            >
              Option B
            </v-btn>
            <v-btn
              value="c"
              large
            >
              Option C
            </v-btn>
            <v-btn
              value="d"
              large
            >
              Option D
            </v-btn>
          </v-btn-toggle>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        toggle_exclusive: ['a', 'b', 'c', 'd'],
      }
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and breaking changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[codecov]

Codecov Report

Merging #7515 into next will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #7515      +/-   ##
==========================================
+ Coverage   87.14%   87.16%   +0.01%     
==========================================
  Files         325      325              
  Lines        8443     8443              
  Branches     2116     2116              
==========================================
+ Hits         7358     7359       +1     
+ Misses        995      994       -1     
  Partials       90       90

Impacted Files	Coverage Δ
...es/vuetify/src/components/VBtnToggle/VBtnToggle.ts	100% <ø> (ø)	⬆️
packages/vuetify/src/components/VSelect/VSelect.ts	94.42% <0%> (+0.42%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 40977fa...9b04f4d. Read the comment docs.

[codecov]

Codecov Report

Merging #7515 into next will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #7515      +/-   ##
==========================================
+ Coverage   87.14%   87.16%   +0.01%     
==========================================
  Files         325      325              
  Lines        8443     8443              
  Branches     2116     2116              
==========================================
+ Hits         7358     7359       +1     
+ Misses        995      994       -1     
  Partials       90       90

Impacted Files	Coverage Δ
...es/vuetify/src/components/VBtnToggle/VBtnToggle.ts	100% <ø> (ø)	⬆️
packages/vuetify/src/components/VSelect/VSelect.ts	94.42% <0%> (+0.42%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 40977fa...9b04f4d. Read the comment docs.