refactor(button): use the new tokens (#29561)

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. -->

- On ionic.button.scss all dependencies to button.scss were removed, to
avoid the old native theme values being mixed on the new ionic theme
button.
- ionic.button.vars.scss partial was removed
- All values were changed to use tokens.
- Updated snapshots that bring slight differences due to now we are
totally using the ionic theme tokens.
- Tests with colors where the ionic button was being added also now have
differences, as the current ion-colors aren't affecting the ionic theme
button. This is expected, as the ionic theme should only work with the
colors from the new Design System, which is something being tacked on
this [PR](https://github.com/ionic-team/ionic-framework/pull/29557). in
the future, we should remove the ionic button from these color ctests
and create new ones that add the new set of colors to the ionic button.

## 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.
-->

core/api.txt

@@ -398,73 +398,50 @@ ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
-ion-button,css-prop,--background,ionic
 ion-button,css-prop,--background,ios
 ion-button,css-prop,--background,md
-ion-button,css-prop,--background-activated,ionic
 ion-button,css-prop,--background-activated,ios
 ion-button,css-prop,--background-activated,md
-ion-button,css-prop,--background-activated-opacity,ionic
 ion-button,css-prop,--background-activated-opacity,ios
 ion-button,css-prop,--background-activated-opacity,md
-ion-button,css-prop,--background-focused,ionic
 ion-button,css-prop,--background-focused,ios
 ion-button,css-prop,--background-focused,md
-ion-button,css-prop,--background-focused-opacity,ionic
 ion-button,css-prop,--background-focused-opacity,ios
 ion-button,css-prop,--background-focused-opacity,md
-ion-button,css-prop,--background-hover,ionic
 ion-button,css-prop,--background-hover,ios
 ion-button,css-prop,--background-hover,md
-ion-button,css-prop,--background-hover-opacity,ionic
 ion-button,css-prop,--background-hover-opacity,ios
 ion-button,css-prop,--background-hover-opacity,md
-ion-button,css-prop,--border-color,ionic
 ion-button,css-prop,--border-color,ios
 ion-button,css-prop,--border-color,md
-ion-button,css-prop,--border-radius,ionic
 ion-button,css-prop,--border-radius,ios
 ion-button,css-prop,--border-radius,md
-ion-button,css-prop,--border-style,ionic
 ion-button,css-prop,--border-style,ios
 ion-button,css-prop,--border-style,md
-ion-button,css-prop,--border-width,ionic
 ion-button,css-prop,--border-width,ios
 ion-button,css-prop,--border-width,md
-ion-button,css-prop,--box-shadow,ionic
 ion-button,css-prop,--box-shadow,ios
 ion-button,css-prop,--box-shadow,md
-ion-button,css-prop,--color,ionic
 ion-button,css-prop,--color,ios
 ion-button,css-prop,--color,md
-ion-button,css-prop,--color-activated,ionic
 ion-button,css-prop,--color-activated,ios
 ion-button,css-prop,--color-activated,md
-ion-button,css-prop,--color-focused,ionic
 ion-button,css-prop,--color-focused,ios
 ion-button,css-prop,--color-focused,md
-ion-button,css-prop,--color-hover,ionic
 ion-button,css-prop,--color-hover,ios
 ion-button,css-prop,--color-hover,md
-ion-button,css-prop,--opacity,ionic
 ion-button,css-prop,--opacity,ios
 ion-button,css-prop,--opacity,md
-ion-button,css-prop,--padding-bottom,ionic
 ion-button,css-prop,--padding-bottom,ios
 ion-button,css-prop,--padding-bottom,md
-ion-button,css-prop,--padding-end,ionic
 ion-button,css-prop,--padding-end,ios
 ion-button,css-prop,--padding-end,md
-ion-button,css-prop,--padding-start,ionic
 ion-button,css-prop,--padding-start,ios
 ion-button,css-prop,--padding-start,md
-ion-button,css-prop,--padding-top,ionic
 ion-button,css-prop,--padding-top,ios
 ion-button,css-prop,--padding-top,md
-ion-button,css-prop,--ripple-color,ionic
 ion-button,css-prop,--ripple-color,ios
 ion-button,css-prop,--ripple-color,md
-ion-button,css-prop,--transition,ionic
 ion-button,css-prop,--transition,ios
 ion-button,css-prop,--transition,md
 ion-button,part,native

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

@@ -1,32 +1,55 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./button";
-@import "./button.ionic.vars";
 
 // Ionic Button
 // -------------------------------------------------------------------------------
-
 :host {
+  --overflow: hidden;
+  --border-width: initial;
+  --border-color: initial;
+  --border-style: initial;
+  --color-activated: var(--color);
+  --color-focused: var(--color);
+  --color-hover: var(--color);
+  --box-shadow: none;
   --padding-bottom: var(--padding-top);
-  --padding-end: #{$button-ionic-padding-end};
+  --padding-end: #{globals.$ionic-space-400};
   --padding-start: var(--padding-end);
-  --padding-top: #{$button-ionic-padding-top};
-  // TODO(FW-6187): set this to a design token when it is added
-  --focus-ring-color: #9ec4fd;
-  --focus-ring-width: 2px;
+  --padding-top: #{globals.$ionic-space-300};
+  --focus-ring-color: #{globals.$ionic-state-focus-1};
+  --focus-ring-width: #{globals.$ionic-border-size-050};
+
+  display: inline-block;
 
   position: relative;
 
-  min-height: #{$button-ionic-min-height};
+  width: auto;
 
-  font-size: #{$button-ionic-font-size};
+  min-height: globals.$ionic-scale-1000;
+
+  color: var(--color);
+
+  font-family: globals.$ionic-font-family;
+
+  font-size: globals.$ionic-font-size-350;
+
+  text-align: center;
+  text-decoration: none;
+
+  white-space: normal;
+
+  user-select: none;
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  font-kerning: none;
 
   // Target area
   &::after {
-    @include position(50%, 0, null, 0);
+    @include globals.position(50%, 0, null, 0);
     position: absolute;
 
     height: 100%;
-    min-height: px-to-rem(48);
+    min-height: globals.$ionic-scale-1200;
 
     transform: translateY(-50%);
 
@@ -38,11 +61,11 @@
   }
 
   ::slotted(ion-icon[slot="start"]) {
-    @include margin-horizontal(null, px-to-rem(8));
+    @include globals.margin-horizontal(null, globals.$ionic-space-200);
   }
 
   ::slotted(ion-icon[slot="end"]) {
-    @include margin-horizontal(px-to-rem(8), null);
+    @include globals.margin-horizontal(globals.$ionic-space-200, null);
   }
 }
 
@@ -53,52 +76,52 @@
 :host(.button-xsmall),
 :host(.button-small) {
   ::slotted(ion-icon[slot="start"]) {
-    @include margin-horizontal(null, px-to-rem(4));
+    @include globals.margin-horizontal(null, globals.$ionic-space-100);
   }
 
   ::slotted(ion-icon[slot="end"]) {
-    @include margin-horizontal(px-to-rem(4), null);
+    @include globals.margin-horizontal(globals.$ionic-space-100, null);
   }
 }
 
 /* Extra Small Button */
 :host(.button-xsmall) {
-  --padding-top: #{$button-ionic-xsmall-padding-top};
-  --padding-end: #{$button-ionic-xsmall-padding-end};
+  --padding-top: #{globals.$ionic-space-100};
+  --padding-end: #{globals.$ionic-space-300};
 
-  min-height: #{$button-ionic-xsmall-min-height};
+  min-height: globals.$ionic-space-600;
 
-  font-size: #{$button-ionic-xsmall-font-size};
+  font-size: globals.$ionic-font-size-300;
 }
 
 /* Small Button */
 :host(.button-small) {
-  --padding-top: #{$button-ionic-small-padding-top};
-  --padding-end: #{$button-ionic-small-padding-end};
+  --padding-top: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-400};
 
-  min-height: #{$button-ionic-small-min-height};
+  min-height: #{globals.$ionic-scale-800};
 
-  font-size: #{$button-ionic-small-font-size};
+  font-size: #{globals.$ionic-font-size-300};
 }
 
 /* Large Button */
 :host(.button-large) {
-  --padding-top: #{$button-ionic-large-padding-top};
-  --padding-end: #{$button-ionic-large-padding-end};
+  --padding-top: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-600};
 
-  min-height: #{$button-ionic-large-min-height};
+  min-height: #{globals.$ionic-scale-1200};
 
-  font-size: #{$button-ionic-large-font-size};
+  font-size: #{globals.$ionic-font-size-400};
 }
 
 /* Extra Large Button */
 :host(.button-xlarge) {
-  --padding-top: #{$button-ionic-xlarge-padding-top};
-  --padding-end: #{$button-ionic-xlarge-padding-end};
+  --padding-top: #{globals.$ionic-space-400};
+  --padding-end: #{globals.$ionic-space-800};
 
-  min-height: #{$button-ionic-xlarge-min-height};
+  min-height: #{globals.$ionic-scale-1400};
 
-  font-size: #{$button-ionic-xlarge-font-size};
+  font-size: #{globals.$ionic-font-size-500};
 }
 
 // Button with Icons
@@ -108,7 +131,7 @@
 ::slotted(ion-icon[slot="start"]),
 ::slotted(ion-icon[slot="end"]),
 ::slotted(ion-icon[slot="icon-only"]) {
-  font-size: px-to-rem(16);
+  font-size: globals.$ionic-font-size-400;
 }
 
 :host(.button-xsmall),
@@ -118,7 +141,7 @@
   ::slotted(ion-icon[slot="start"]),
   ::slotted(ion-icon[slot="end"]),
   ::slotted(ion-icon[slot="icon-only"]) {
-    font-size: 1em;
+    font-size: inherit;
   }
 }
 
@@ -153,33 +176,33 @@
 
 // Only show the focus ring when the button is focused
 :host(.ion-focused) .button-native {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color);
+  outline-offset: globals.$ionic-border-size-050;
 }
 
 // Fill Solid Button
 // -------------------------------------------------------------------------------
 
 :host(.button-solid) {
-  --background-activated: #{ion-color(primary, shade)};
+  --background-activated: #{globals.$ionic-color-primary-base};
 }
 
-:host(.button-solid.ion-color.ion-activated) .button-native::after {
-  background: #{current-color(shade)};
+:host(.button-solid.ion-activated) .button-native::after {
+  background: #{globals.$ionic-color-primary-900};
 }
 
 // Fill Outline Button
 // --------------------------------------------------
 
 :host(.button-outline) {
-  --border-width: #{$button-ionic-outline-border-width};
-  --border-style: #{$button-ionic-outline-border-style};
-  --background-activated: #e3e3e3;
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --background-activated-opacity: 1;
   --background-focused: transparent;
   --background-hover: transparent;
   --background-focused-opacity: 0.1;
-  --color-activated: #{ion-color(primary, base)};
+  --color-activated: #{globals.$ionic-color-primary-base};
 }
 
 :host(.button-outline.ion-focused) {
@@ -190,7 +213,7 @@
 // --------------------------------------------------
 
 :host(.button-clear) {
-  --background-activated: #e3e3e3;
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --background-activated-opacity: 1;
   --background-focused: transparent;
   --background-hover: transparent;
@@ -199,22 +222,215 @@
 // Button Hover
 // --------------------------------------------------
 
+:host(.button-solid) {
+  --background-hover: #{globals.$ionic-color-primary-800};
+}
+
 :host(.button-outline),
 :host(.button-clear) {
-  --background-hover: #121212;
-  --background-hover-opacity: 0.04;
+  --background-hover: #{globals.$ionic-color-neutral-100};
 }
 
 // Button: Disabled
 // --------------------------------------------------
 
 :host(.button-disabled) {
-  --color: #c9c9c9;
+  --background: #{globals.$ionic-state-disabled};
   --border-color: var(--color);
 
-  opacity: 1;
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-:host(.button-solid.button-disabled) {
-  --background: #f5f5f5;
+// Solid Button
+// --------------------------------------------------
+
+// Default Solid Color
+:host(.button-solid) {
+  --background: #{globals.$ionic-color-primary-base};
+  --color: #{globals.$ionic-color-base-white};
+}
+
+// Outline Button
+// --------------------------------------------------
+
+// Default Outline Color
+:host(.button-outline) {
+  --border-color: #{globals.$ionic-color-primary-base};
+  --background: #{globals.$ionic-color-base-white};
+  --color: #{globals.$ionic-color-primary-base};
+}
+
+// Clear Button
+// --------------------------------------------------
+
+// Default Clear Color
+:host(.button-clear) {
+  --border-width: #{globals.$ionic-border-size-0};
+  --background: transparent;
+  --color: #{globals.$ionic-color-primary-base};
+}
+
+// Block Button
+// --------------------------------------------------
+
+:host(.button-block) {
+  display: block;
+}
+
+:host(.button-block) .button-native {
+  @include globals.margin-horizontal(0);
+
+  width: 100%;
+
+  clear: both;
+
+  contain: content;
+}
+
+:host(.button-block) .button-native::after {
+  clear: both;
+}
+
+// Full Button
+// --------------------------------------------------
+
+:host(.button-full) {
+  display: block;
+}
+
+:host(.button-full) .button-native {
+  @include globals.margin-horizontal(0);
+
+  width: 100%;
+
+  contain: content;
+}
+
+:host(.button-full:not(.button-round)) .button-native {
+  @include globals.border-radius(0);
+
+  border-right-width: 0;
+  border-left-width: 0;
+}
+
+.button-native {
+  @include globals.border-radius(var(--border-radius));
+  @include globals.font-smoothing();
+  @include globals.margin(0);
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include globals.text-inherit();
+
+  display: flex;
+
+  position: relative;
+
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  min-height: inherit;
+
+  transition: var(--transition);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  outline: none;
+
+  background: var(--background);
+
+  line-height: 1;
+
+  box-shadow: var(--box-shadow);
+
+  contain: layout style;
+  cursor: pointer;
+
+  opacity: var(--opacity);
+  overflow: var(--overflow);
+
+  z-index: 0;
+  box-sizing: border-box;
+  appearance: none;
+}
+
+.button-native::-moz-focus-inner {
+  border: 0;
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 1;
+}
+
+// Button Slots
+// --------------------------------------------------
+
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
+  flex-shrink: 0;
+}
+
+// Button Icons
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  font-size: globals.$ionic-font-size-500;
+  pointer-events: none;
+}
+
+// Button: States
+// --------------------------------------------------
+
+.button-native::after {
+  @include globals.button-state();
+}
+
+// Button Focused
+:host(.ion-focused) {
+  color: var(--color-focused);
+}
+
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+
+  opacity: var(--background-focused-opacity);
+}
+
+// Button Hover
+@media (any-hover: hover) {
+  :host(:hover) {
+    color: var(--color-hover);
+  }
+
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+
+    opacity: var(--background-hover-opacity);
+  }
+}
+
+// Button Activated
+:host(.ion-activated) {
+  color: var(--color-activated);
+}
+
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
 }

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

@@ -1,125 +0,0 @@
-@import "../../themes/native/native.globals.ios";
-
-// Ionic Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the button
-$button-ionic-padding-top: px-to-rem(12);
-
-/// @prop - Padding end of the button
-$button-ionic-padding-end: px-to-rem(16);
-
-/// @prop - Padding bottom of the button
-$button-ionic-padding-bottom: $button-ionic-padding-top;
-
-/// @prop - Padding start of the button
-$button-ionic-padding-start: $button-ionic-padding-end;
-
-/// @prop - Minimum height of the button
-$button-ionic-min-height: px-to-rem(40);
-
-/// @prop - Font size of the button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-font-size: dynamic-font-max(14px, 3);
-
-// Ionic Extra Small Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the extra small button
-$button-ionic-xsmall-padding-top: px-to-rem(4);
-
-/// @prop - Padding end of the extra small button
-$button-ionic-xsmall-padding-end: px-to-rem(12);
-
-/// @prop - Padding bottom of the extra small button
-$button-ionic-xsmall-padding-bottom: $button-ionic-xsmall-padding-top;
-
-/// @prop - Padding start of the extra small button
-$button-ionic-xsmall-padding-start: $button-ionic-xsmall-padding-end;
-
-/// @prop - Minimum height of the extra small button
-$button-ionic-xsmall-min-height: px-to-rem(24);
-
-/// @prop - Font size of the extra small button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-xsmall-font-size: dynamic-font-max(12px, 3);
-
-// Ionic Small Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the small button
-$button-ionic-small-padding-top: px-to-rem(8);
-
-/// @prop - Padding end of the small button
-$button-ionic-small-padding-end: px-to-rem(16);
-
-/// @prop - Padding bottom of the small button
-$button-ionic-small-padding-bottom: $button-ionic-small-padding-top;
-
-/// @prop - Padding start of the small button
-$button-ionic-small-padding-start: $button-ionic-small-padding-end;
-
-/// @prop - Minimum height of the small button
-$button-ionic-small-min-height: px-to-rem(32);
-
-/// @prop - Font size of the small button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-small-font-size: dynamic-font-max(12px, 3);
-
-// Ionic Large Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the large button
-$button-ionic-large-padding-top: px-to-rem(16);
-
-/// @prop - Padding end of the large button
-$button-ionic-large-padding-end: px-to-rem(24);
-
-/// @prop - Padding bottom of the large button
-$button-ionic-large-padding-bottom: $button-ionic-large-padding-top;
-
-/// @prop - Padding start of the large button
-$button-ionic-large-padding-start: $button-ionic-large-padding-end;
-
-/// @prop - Minimum height of the large button
-$button-ionic-large-min-height: px-to-rem(48);
-
-/// @prop - Font size of the large button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-large-font-size: dynamic-font-max(16px, 3);
-
-// Ionic Extra Large Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding top of the extra large button
-$button-ionic-xlarge-padding-top: px-to-rem(16);
-
-/// @prop - Padding end of the extra large button
-$button-ionic-xlarge-padding-end: px-to-rem(32);
-
-/// @prop - Padding bottom of the extra large button
-$button-ionic-xlarge-padding-bottom: $button-ionic-xlarge-padding-top;
-
-/// @prop - Padding start of the extra large button
-$button-ionic-xlarge-padding-start: $button-ionic-xlarge-padding-end;
-
-/// @prop - Minimum height of the extra large button
-$button-ionic-xlarge-min-height: px-to-rem(56);
-
-/// @prop - Font size of the extra large button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ionic-xlarge-font-size: dynamic-font-max(20px, 3);
-
-// Ionic Outline Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border width of the outline button
-$button-ionic-outline-border-width: 1px;
-
-/// @prop - Border style of the outline button
-$button-ionic-outline-border-style: solid;