bug: ion-button MD hover too transparent

[btsiders]

Bug Report

Ionic version:

[x] 4.2.1

Current behavior:

When hovering over ion-buttons that are clear or outlined, the button always looks very light and washed out, way more than expected.

Expected behavior:

The color should be easier to see.

Steps to reproduce:

1. Put a button on a page.
2. Set its fill to outline or clear.
3. Hover over it.
4. The hover color should be about a 40% transparency, but it is a 4% transparency.

Related code:

<ion-button fill="clear">Hover over me</ion-button>
<ion-button fill="outline">Hover over me</ion-button>

Other information:

I will submit a PR to fix this. It just seems to be a typo, really.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Bryan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.7
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.5.0

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[brandyscarney]

Thanks for the issue! The opacity of 0.04 follows the Material Design spec and the Material Web Implementation of the button found here: https://material-components.github.io/material-components-web-catalog/#/component/button

I can't find anywhere in the spec that uses .4 as the opacity, and it looks a bit too dark here:

Are you seeing this opacity somewhere?

[btsiders]

Sorry. I just assumed 4% was a typo since it seems extremely light in the specific case I'm looking at, so then I also assumed it should have been 40% instead. It looks like 4% is more right in most cases, but this number really needs to be variable. 4% is the default starting opacity in their examples, but sometimes the number needs to be different.

From https://material.io/design/interaction/states.html#hover:

The opacity value of the overlay should be adjusted for each different combination of text on surface in order to ensure proper visibility and color contrast accessibility. Hover overlays should be at lower opacities to avoid distracting from content.

Specifically, I'm looking at buttons with color="medium" set. I use a custom color scheme but haven't changed the medium colors yet.

  /** medium **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

The hover in this case is very difficult to see.

I would propose that a new CSS variable be added so that we can override the hover overlay.

In the mean time, for my specific case, I can also discontinue using the medium color for lightened buttons. I can probably work around this by using the "dark" color and setting overall button opacity.