fix(VBtn): scale font and padding with numeric size

[KaelWD]

Description

closes #16288

TODO:

• Chips
• Icons
• IconBtn
  • Inconsistent with the rest of the framework, uses sizes prop instead of the global $size-scales
  • Numeric sizes straight up don't work at all on master, the icon is always "default"
• Switch
  • Also broken numeric sizes
  • iconSizes isn't configurable
• Alert
  • Uses iconSizes instead of $size-scales
• Avatar
• Progress
• Timeline
• Documentation
• MD3 blueprint preset?

Possible breaking changes:

• VBtn numeric size only sets a fixed height, width is now dynamic instead of being square.

Markup:

<template>
  <v-app>
    <v-container>
      Btn:
      <br>
      <v-btn size="20">20</v-btn>
      <v-btn size="x-small">20</v-btn>
      <br>
      <v-btn size="28">28</v-btn>
      <v-btn size="small">28</v-btn>
      <br>
      <v-btn size="36">36</v-btn>
      <v-btn size="default">36</v-btn>
      <br>
      <v-btn size="44">44</v-btn>
      <v-btn size="large">44</v-btn>
      <br>
      <v-btn size="52">52</v-btn>
      <v-btn size="x-large">52</v-btn>

      <br><br>

      Chip:
      <br>
      <v-chip size="20">20</v-chip>
      <v-chip size="x-small">20</v-chip>
      <br>
      <v-chip size="26">26</v-chip>
      <v-chip size="small">26</v-chip>
      <br>
      <v-chip size="32">32</v-chip>
      <v-chip size="default">32</v-chip>
      <br>
      <v-chip size="38">38</v-chip>
      <v-chip size="large">38</v-chip>
      <br>
      <v-chip size="44">44</v-chip>
      <v-chip size="x-large">44</v-chip>
      <br>
      <v-chip size="20">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        20
      </v-chip>
      <v-chip size="x-small">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        20
      </v-chip>
      <br>
      <v-chip size="26">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        26
      </v-chip>
      <v-chip size="small">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        26
      </v-chip>
      <br>
      <v-chip size="32">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        32
      </v-chip>
      <v-chip size="default">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        32
      </v-chip>
      <br>
      <v-chip size="38">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        38
      </v-chip>
      <v-chip size="large">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        38
      </v-chip>
      <br>
      <v-chip size="44">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        44
      </v-chip>
      <v-chip size="x-large">
        <template #prepend><v-avatar start><v-icon icon="$vuetify" /></v-avatar></template>
        44
      </v-chip>

      <br><br>

      Icon:
      <br>
      <v-icon icon="$vuetify" size="16" />
      <v-icon icon="$vuetify" size="x-small" />
      <br>
      <v-icon icon="$vuetify" size="20" />
      <v-icon icon="$vuetify" size="small" />
      <br>
      <v-icon icon="$vuetify" size="24" />
      <v-icon icon="$vuetify" size="default" />
      <br>
      <v-icon icon="$vuetify" size="28" />
      <v-icon icon="$vuetify" size="large" />
      <br>
      <v-icon icon="$vuetify" size="32" />
      <v-icon icon="$vuetify" size="x-large" />

      <br><br>

      IconBtn:
      <br>
      <v-icon-btn icon="$vuetify" size="16" />
      <v-icon-btn icon="$vuetify" size="x-small" />
      <br>
      <v-icon-btn icon="$vuetify" size="24" />
      <v-icon-btn icon="$vuetify" size="small" />
      <br>
      <v-icon-btn icon="$vuetify" size="40" />
      <v-icon-btn icon="$vuetify" size="default" />
      <br>
      <v-icon-btn icon="$vuetify" size="48" />
      <v-icon-btn icon="$vuetify" size="large" />
      <br>
      <v-icon-btn icon="$vuetify" size="56" />
      <v-icon-btn icon="$vuetify" size="x-large" />

      <br><br>

      Avatar:
      <br>
      <v-avatar color="primary" icon="$vuetify" size="24" />
      <v-avatar color="primary" icon="$vuetify" size="x-small" />
      <br>
      <v-avatar color="primary" icon="$vuetify" size="32" />
      <v-avatar color="primary" icon="$vuetify" size="small" />
      <br>
      <v-avatar color="primary" icon="$vuetify" size="40" />
      <v-avatar color="primary" icon="$vuetify" size="default" />
      <br>
      <v-avatar color="primary" icon="$vuetify" size="48" />
      <v-avatar color="primary" icon="$vuetify" size="large" />
      <br>
      <v-avatar color="primary" icon="$vuetify" size="56" />
      <v-avatar color="primary" icon="$vuetify" size="x-large" />

      <br><br>

      ProgressCircular:
      <br>
      <v-progress-circular size="16" />
      <v-progress-circular size="x-small" />
      <br>
      <v-progress-circular size="24" />
      <v-progress-circular size="small" />
      <br>
      <v-progress-circular size="32" />
      <v-progress-circular size="default" />
      <br>
      <v-progress-circular size="48" />
      <v-progress-circular size="large" />
      <br>
      <v-progress-circular size="64" />
      <v-progress-circular size="x-large" />

      <br><br>

      Timeline:
      <br>
      <v-row>
        <v-col cols="auto">
          <v-timeline side="start" dense>
            <v-timeline-item size="22">22</v-timeline-item>
            <v-timeline-item size="30">30</v-timeline-item>
            <v-timeline-item size="38">38</v-timeline-item>
            <v-timeline-item size="46">46</v-timeline-item>
            <v-timeline-item size="54">54</v-timeline-item>
          </v-timeline>
        </v-col>
        <v-col cols="auto">
          <v-timeline side="end" dense>
            <v-timeline-item size="x-small">22</v-timeline-item>
            <v-timeline-item size="small">30</v-timeline-item>
            <v-timeline-item size="default">38</v-timeline-item>
            <v-timeline-item size="large">46</v-timeline-item>
            <v-timeline-item size="x-large">54</v-timeline-item>
          </v-timeline>
        </v-col>
      </v-row>

      <br><br>

      <v-switch size="11" />
      <v-switch size="x-small" />
      <br>
      <v-switch size="14" />
      <v-switch size="small" />
      <br>
      <v-switch size="16" />
      <v-switch size="default" />
      <br>
      <v-switch size="18" />
      <v-switch size="large" />
      <br>
      <v-switch size="22" />
      <v-switch size="x-large" />
      <br><br>

      <v-rating size="20" />
      <v-rating size="x-small" />
      <br>
      <v-rating size="28" />
      <v-rating size="small" />
      <br>
      <v-rating size="36" />
      <v-rating size="default" />
      <br>
      <v-rating size="44" />
      <v-rating size="large" />
      <br>
      <v-rating size="52" />
      <v-rating size="x-large" />
      <br><br>

      <v-pagination length="5" size="20" />
      <v-pagination length="5" size="x-small" />
      <br>
      <v-pagination length="5" size="28" />
      <v-pagination length="5" size="small" />
      <br>
      <v-pagination length="5" size="36" />
      <v-pagination length="5" size="default" />
      <br>
      <v-pagination length="5" size="44" />
      <v-pagination length="5" size="large" />
      <br>
      <v-pagination length="5" size="52" />
      <v-pagination length="5" size="x-large" />

      <br><br>

      <v-empty-state height="64" icon="$vuetify" min-height="0" size="16" />
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="x-small" />
      <br>
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="20" />
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="small" />
      <br>
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="24" />
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="default" />
      <br>
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="28" />
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="large" />
      <br>
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="32" />
      <v-empty-state height="64" icon="$vuetify" min-height="0" size="x-large" />
    </v-container>
  </v-app>
</template>