fix(components): fix issues with button states (#20278)

- Update action sheet colors to match spec (md)
- Remove activated background on buttons (md - uses ripple)
- Update Segment Button to use proper indicator color when inside of a toolbar
- Add back input highlight on focus

fixes #20276

core/src/components/action-sheet/action-sheet.ios.scss

@@ -8,7 +8,7 @@
   --background: #{$action-sheet-ios-background-color};
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: #{$action-sheet-ios-button-background};
-  --button-background-activated: #{$text-color};
+  --button-background-activated: #{$action-sheet-ios-button-background-activated};
   --button-background-activated-opacity: .08;
   --button-background-hover: currentColor;
   --button-background-hover-opacity: .04;

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -105,21 +105,9 @@ $action-sheet-ios-button-icon-font-size:                          28px !default;
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .1em !default;
 
-/// @prop - Height of the action sheet button icon
-$action-sheet-ios-button-icon-height:                             .7em !default;
-
-/// @prop - Margin top of the action sheet button icon
-$action-sheet-ios-button-icon-margin-top:                         -10px !default;
-
 /// @prop - Font size of the action sheet button
 $action-sheet-ios-button-font-size:                               20px !default;
 
-/// @prop - Border width of the action sheet button
-$action-sheet-ios-button-border-width:                            $hairlines-width !default;
-
-/// @prop - Border style of the action sheet button
-$action-sheet-ios-button-border-style:                            solid !default;
-
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;
 
@@ -129,11 +117,8 @@ $action-sheet-ios-button-border-color:                            rgba($text-col
 /// @prop - Background color of the action sheet button
 $action-sheet-ios-button-background:                              linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
 
-/// @prop - Background color alpha of the activated action sheet button
-$action-sheet-ios-button-background-alpha-activated:              .08 !default;
-
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:                    rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default;
+$action-sheet-ios-button-background-activated:                    $text-color !default;
 
 /// @prop - Background color of the selected action sheet button
 $action-sheet-ios-button-background-selected:                     $background-color !default;

core/src/components/action-sheet/action-sheet.md.scss

@@ -16,8 +16,8 @@
   --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
-  --button-color: #{var(--color, $action-sheet-md-button-text-color)};
-  --color: #{$action-sheet-md-button-text-color};
+  --button-color: #{$action-sheet-md-button-text-color};
+  --color: #{$action-sheet-md-title-color};
 }
 
 .action-sheet-title {
@@ -73,7 +73,7 @@
   @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
-  color: #{$action-sheet-md-icon-color};
+  color: var(--color);
 
   font-size: $action-sheet-md-icon-font-size;
 }

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

@@ -129,16 +129,13 @@
 // Material Design Button: Hover
 // --------------------------------------------------
 
-:host(.button-solid.ion-color.ion-activated) .button-native::after,
 :host(.button-solid.ion-color.ion-focused) .button-native::after {
   background: #{current-color(contrast)};
 
   opacity: .24;
 }
 
-:host(.button-clear.ion-color.ion-activated) .button-native::after,
 :host(.button-clear.ion-color.ion-focused) .button-native::after,
-:host(.button-outline.ion-color.ion-activated) .button-native::after,
 :host(.button-outline.ion-color.ion-focused) .button-native::after {
   background: #{current-color(base)};
 

core/src/components/item/item.scss

@@ -358,6 +358,8 @@ button, a {
   position: absolute;
 
   background: var(--highlight-background);
+
+  z-index: 1;
 }
 
 .item-highlight {

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

@@ -193,11 +193,11 @@
 
 // Segment button indicator color should use the background checked variable with
 // a fallback to the default value of --indicator-color
-:host(.in-toolbar) .segment-button-indicator-background {
+:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background {
   background: #{var(--ion-toolbar-segment-indicator-color, var(--indicator-color))};
 }
 
 // Do not use the global or local CSS variable if the toolbar has a color
-:host(.in-toolbar-color) .segment-button-indicator-background {
+:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background {
   background: #{current-color(contrast)};
 }