experiment(VBtn): align button sizes with MD3

[J-Sek]

Description

Just experimenting with MD3 button sizes... it all should be controlled by the blueprint.

Preview

Markup:

<template>
  <v-app>
    <v-defaults-provider :defaults="{ VBtn: { color: 'primary', rounded: 'pill', variant: 'flat' } }">
      <v-container>
        <v-btn size="x-small">Extra small</v-btn>
        <v-btn size="small">Small</v-btn>
        <v-btn size="default">Medium</v-btn>
        <v-btn size="large">Large</v-btn>
        <v-btn size="x-large">Extra Large</v-btn>
      </v-container>
      <v-container>
        <v-btn rounded="pill" variant="outlined">Round</v-btn>
        <v-btn rounded="lg" variant="outlined">Square</v-btn>
      </v-container>
      <v-container>
        <v-btn variant="elevated">Elevated</v-btn>
        <v-btn variant="flat">Filled</v-btn>
        <v-btn variant="tonal">Tonal</v-btn>
        <v-btn variant="outlined">Outlined</v-btn>
        <v-btn variant="text">Text</v-btn>
      </v-container>
      <v-container>
        <v-btn class="px-6" size="small">24dp padding</v-btn>
        <v-btn class="px-4" size="small">16dp padding</v-btn>
      </v-container>
    </v-defaults-provider>
  </v-app>
</template>

<style>
.v-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>