feat(VBtn): add vbtn styling for md3 blueprint

[davycardinaal]

Description

The button components in Material 3 are slightly higher and shouldn't contain uppercase text. This PR adds default props for VBtn to the md3 blueprint to obey these specs.

Source: https://m3.material.io/components/buttons/specs

Markup:

<template>
  <v-app>
    <v-container>
      <v-btn variant="text">Button</v-btn>
      <v-btn variant="flat">Button</v-btn>
      <v-btn variant="elevated">Button</v-btn>
      <v-btn variant="tonal">Button</v-btn>
      <v-btn variant="outlined">Button</v-btn>
      <v-btn variant="plain">Button</v-btn>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
  }
</script>

[davycardinaal]

Apparently this breaks the button variants for icons. They are no longer round:

<template>
  <v-app>
    <v-container>
      <v-defaults-provider :defaults="md3.defaults">
        <v-btn variant="text">Button</v-btn>
        <v-btn variant="flat">Button</v-btn>
        <v-btn variant="elevated">Button</v-btn>
        <v-btn variant="tonal">Button</v-btn>
        <v-btn variant="outlined">Button</v-btn>
        <v-btn variant="plain">Button</v-btn>
        <v-btn icon="mdi-thumb-up" variant="elevated" />
      </v-defaults-provider>
    </v-container>
  </v-app>
</template>

<script>
  import { md3 } from 'vuetify/src/blueprints'

  export default {
    name: 'Playground',
    setup () {
      return {
        md3,
      }
    },
  }
</script>

Is it possible to do something like this with the configurations?

.v-btn:not(.v-btn--icon) {
  height: 40px;
}

[KaelWD]

No. We need to figure out a way to include sass variables with blueprints, probably using https://sass-lang.com/documentation/modules/meta/#load-css

[davycardinaal]

Thanks for the quick reply @KaelWD! What do you want me to do with this PR? Close it, or want to keep it open for reference?