fix(button): match MD spec timing, outline, hover (#16160)

This adjusts our Material Design button to match the updated spec for:

- transition timing
- outline border styles
- clear/outline hover background color

core/src/components/button/button.md.scss

@@ -15,9 +15,9 @@
   --padding-start: #{$button-md-padding-start};
   --padding-end: #{$button-md-padding-end};
   --height: #{$button-md-height};
-  --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function,
-                  background-color $button-md-transition-duration $button-md-transition-timing-function,
-                  color $button-md-transition-duration $button-md-transition-timing-function};
+  --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
+                background-color 15ms linear,
+                color 15ms linear;
 
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
@@ -42,14 +42,22 @@
 // --------------------------------------------------
 
 :host(.button-outline) {
-  --border-width: 1px;
+  --border-width: 2px;
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
   --background-focused: #{ion-color(primary, base, .1)};
   --color-activated: #{ion-color(primary, base)};
 }
 
+:host(.button-outline:hover) .button-native {
+  background: ion-color(primary, base, .04);
+}
+
+:host(.button-outline.ion-color:hover) .button-native {
+  background: current-color(base, .04);
+}
+
 :host(.button-outline.activated.ion-color) .button-native {
   background: transparent;
 }
@@ -66,6 +74,14 @@
   --color-focused: #{ion-color(primary, base)};
 }
 
+:host(.button-clear:hover) .button-native {
+  background: ion-color(primary, base, .04);
+}
+
+:host(.button-clear.ion-color:hover) .button-native {
+  background: current-color(base, .04);
+}
+
 
 // Material Design Round Button
 // --------------------------------------------------

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

@@ -47,12 +47,6 @@ $button-md-letter-spacing:                              0.06em;
 /// @prop - Box shadow of the button
 $button-md-box-shadow:                                  0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
-/// @prop - Duration of the transition of the button
-$button-md-transition-duration:                         300ms !default;
-
-/// @prop - Speed curve of the transition of the button
-$button-md-transition-timing-function:                  cubic-bezier(.4, 0, .2, 1) !default;
-
 /// @prop - Opacity of the activated button
 $button-md-opacity-activated:                           1 !default;