fix(button): ionic theme sizes (#30405)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adjusted ion-button sizes on Ionic theme to match Figma UI. Now
figma's small | medium | large match ionic's small | default | large.
- Removed xsmall and xlarge sizes, as UX rolled back the decision to
have them.
- Removed xsmall and xlarge tests and their usages.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

- [Ionic Theme
Button](https://ionic-framework-git-rou-11903-ionic1.vercel.app/src/components/button/test/theme-ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

core/src/components/button/button.ionic.scss

@@ -4,20 +4,15 @@
 // Ionic Button
 // -------------------------------------------------------------------------------
 :host {
-  --padding-bottom: var(--padding-top);
-  --padding-end: #{globals.$ion-space-500};
-  --padding-start: var(--padding-end);
   --padding-top: #{globals.$ion-space-0};
+  --padding-end: #{globals.$ion-space-0};
+  --padding-bottom: var(--padding-top);
+  --padding-start: var(--padding-end);
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
   position: relative;
 
-  min-height: globals.$ion-scale-1000;
-
-  font-family: globals.$ion-font-family;
-  font-size: globals.$ion-font-size-350;
-
   // Target area
   &::after {
     @include globals.position(50%, 0, null, 0);
@@ -102,44 +97,31 @@
 // Button Sizes
 // -------------------------------------------------------------------------------
 
-/* Extra Small Button */
-:host(.button-xsmall) {
-  --padding-top: #{globals.$ion-space-100};
-  --padding-end: #{globals.$ion-space-300};
-
-  min-height: globals.$ion-space-600;
-
-  font-size: globals.$ion-font-size-300;
-}
-
 /* Small Button */
 :host(.button-small) {
-  --padding-top: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-400};
 
-  min-height: #{globals.$ion-scale-800};
+  @include globals.typography(globals.$ion-body-action-sm);
 
-  font-size: #{globals.$ion-font-size-300};
+  min-height: #{globals.$ion-scale-1000};
+}
+
+/* Medium Button */
+:host(.button-medium) {
+  --padding-end: #{globals.$ion-space-500};
+
+  @include globals.typography(globals.$ion-body-action-md);
+
+  min-height: #{globals.$ion-scale-1200};
 }
 
 /* Large Button */
 :host(.button-large) {
-  --padding-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-600};
+  --padding-end: #{globals.$ion-space-700};
 
-  min-height: #{globals.$ion-scale-1200};
-
-  font-size: #{globals.$ion-font-size-400};
-}
-
-/* Extra Large Button */
-:host(.button-xlarge) {
-  --padding-top: #{globals.$ion-space-400};
-  --padding-end: #{globals.$ion-space-800};
+  @include globals.typography(globals.$ion-body-action-lg);
 
   min-height: #{globals.$ion-scale-1400};
-
-  font-size: #{globals.$ion-font-size-500};
 }
 
 // Button with Icons
@@ -152,10 +134,8 @@
   font-size: globals.$ion-font-size-400;
 }
 
-:host(.button-xsmall),
 :host(.button-small),
-:host(.button-large),
-:host(.button-xlarge) {
+:host(.button-large) {
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
@@ -183,11 +163,6 @@
   height: globals.$ion-space-500;
 }
 
-:host(.button-xlarge) ::slotted(ion-spinner) {
-  width: globals.$ion-space-600;
-  height: globals.$ion-space-600;
-}
-
 // Button Shapes
 // -------------------------------------------------------------------------------
 
@@ -198,11 +173,6 @@
   --border-radius: #{globals.$ion-border-radius-200};
 }
 
-:host(.button-soft.button-xsmall),
-:host(.button-soft.button-small) {
-  --border-radius: #{globals.$ion-border-radius-100};
-}
-
 // Round Button
 // --------------------------------------------------
 
@@ -264,8 +234,6 @@
   font-size: globals.$ion-font-size-500;
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot="start"]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot="start"]),
 :host(.button-small) ::slotted(ion-icon[slot="start"]),
 :host(.button-small) ::slotted(ion-spinner[slot="start"]) {
   @include globals.margin-horizontal(null, globals.$ion-space-200);
@@ -277,14 +245,10 @@
 }
 
 :host(.button-large) ::slotted(ion-icon[slot="start"]),
-:host(.button-large) ::slotted(ion-spinner[slot="start"]),
-:host(.button-xlarge) ::slotted(ion-icon[slot="start"]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot="start"]) {
+:host(.button-large) ::slotted(ion-spinner[slot="start"]) {
   @include globals.margin-horizontal(null, globals.$ion-space-300);
 }
 
-:host(.button-xsmall) ::slotted(ion-icon[slot="end"]),
-:host(.button-xsmall) ::slotted(ion-spinner[slot="end"]),
 :host(.button-small) ::slotted(ion-icon[slot="end"]),
 :host(.button-small) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-200, null);
@@ -296,9 +260,7 @@
 }
 
 :host(.button-large) ::slotted(ion-icon[slot="end"]),
-:host(.button-large) ::slotted(ion-spinner[slot="end"]),
-:host(.button-xlarge) ::slotted(ion-icon[slot="end"]),
-:host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
+:host(.button-large) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }