bug: Toast custom css property button-colour does not work

[pastcompute]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
According to https://ionicframework.com/docs/api/toast I can change the background colour and the button colour, as well as a number of other attributes.

Using custom CSS I can configure the border radius, width, height and colour as described in #16666 (comment) and I can additionally change the text colour using --border-color, and the background using --background, however, if I try and change the button colour using --button-color it seems to be ignored and the button remains the default blue.

Expected behavior:
The property --button-color should work as advertised

Steps to reproduce:

1. Create a new blank app
2. To the default home page constructor, add a toast controller, then in ionViewDidEnter(), add the following:

  async ionViewDidEnter() {
    const t = await this.toastCtrl.create({
      closeButtonText: 'hello', cssClass: 'my-toast-class', message: 'hello, world', showCloseButton: true
    });
    t.present();
  }

3. In the global.scss add the following:

ion-toast.my-toast-class {
  --background: red;
  --button-color: yellow;   // <-- this is not working
  --color: orange;
  --border-radius: 20px;
  --border-width: 5px;
  --border-style: double;
  --border-color: var(--ion-color-info);
}

4. Run ionic serve and observe that the toast button colour is not set to yellow as expected

Related code:

Other information:

Happens on both Firefox and Chrome

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.14.2 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[pastcompute]

I would also note that I am unable to set the toast class per-page if I wanted to - when I put the CSS block in the home.page.scss instead of global.scss, it has no effect at all for any of the toast properties, whereas I can for example change the ion-title --color property from there. I'm assuming this is because the toast controller is a global service?

[davl3232]

It seems --ion-color-primary takes precedence at the button in the shadow DOM of ion-toast:

[pastcompute]

@brandyscarney Thank you, that was quick!

What is the likely release version onto npm?

[brandyscarney]

@pastcompute It will be in the 4.4.0 release which should go out today if all goes as planned. 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.