fix: scale font and padding with numeric size

[KaelWD]

Description

closes #16288

TODO:

• Chips
• Icons
• IconBtn
  • Inconsistent with the rest of the framework, uses iconSizes prop instead of the global $size-scales
  • Numeric size doesn't affect the icon, you have to set iconSize too
• Alert
  • Uses iconSizes prop instead of the global $size-scales
• Switch
  • Numeric sizes don't work at all
  • iconSizes isn't configurable
  • icon doesn't scale with size unless inset="material | square"
  • loader size is the same for inset even though the thumb is larger
• Avatar
• Progress
• Timeline

Possible breaking changes:

• VBtn numeric size only sets a fixed height, width is now dynamic instead of being square.
• $switch-sizes and $switch-inset-sizes are removed.
• VSwitch named sizes are 1-2px different, previous scale was not linear.

Future enhancements (not included in this PR):

• Per-size customisation
  • Somewhat like $switch-sizes was to allow something more like feat(VBtn,VIconBtn): align sizes, spacing and focus with MD3 #21831 but in sass.
• Do something about the IconBtn inconsistency.

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>

      Switch:
      <br>
      <v-row>
        <v-col cols="auto">
          <v-switch size="14" />
          <v-switch size="x-small" />
          <br>
          <v-switch size="17" />
          <v-switch size="small" />
          <br>
          <v-switch size="20" />
          <v-switch size="default" />
          <br>
          <v-switch size="23" />
          <v-switch size="large" />
          <br>
          <v-switch size="26" />
          <v-switch size="x-large" />
        </v-col>
        <v-col cols="auto">
          <v-switch size="14" inset />
          <v-switch size="x-small" inset />
          <br>
          <v-switch size="19" inset />
          <v-switch size="small" inset />
          <br>
          <v-switch size="24" inset />
          <v-switch size="default" inset />
          <br>
          <v-switch size="29" inset />
          <v-switch size="large" inset />
          <br>
          <v-switch size="34" inset />
          <v-switch size="x-large" inset />
        </v-col>
      </v-row>
      <br><br>

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

      Pagination:
      <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>

      EmptyState:
      <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>