ion-button ignores --background variables if a color is set

Bug Report

Ionic version:

[x] 4.0.0

Current behavior: In a corporate theme I’m required to add a gradient to all buttons. The gradient is derived from the color property that is set to a component.

In the betas and as far as I know also in the RCs of Ionic I could override the background like this:

ion-button[class*="ion-color-primary"]:not(.button-outline):not(.button-clear) {
  --background: linear-gradient(
    to bottom,
    #000 0%,
    #fff 100%
  );
}

Unfortunately this approach has now also stopped working. It would be great if I could just do something like this:

ion-button {
   &.ion-color-primary {
      --background: #somecolor
   }
}

Expected behavior: I think the --background property should always be respected, regardless of the button type. Currently it seems like the --background variable is only used for some of the button types. For solid color buttons the background is just set without using the variable: https://github.com/ionic-team/ionic/blob/74ce34fa68b926777a4166c5eb815866433ae91e/core/src/components/button/button.scss#L86

I think it should rather be

background: var(--background, current-color(base));

Steps to reproduce: Try to override the background variable for a button like this:

<ion-button color="primary">test</ion-button>

Related code:

Ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0
   @angular-devkit/core       : 7.2.3
   @angular-devkit/schematics : 7.2.3
   @angular/cli               : 7.1.4
   @ionic/ng-toolkit          : not installed
   @ionic/schematics-angular  : not installed

System:

   NodeJS : v11.8.0 (/usr/local/Cellar/node/11.8.0/bin/node)
   npm    : 6.5.0
   OS     : macOS

[brandyscarney]

The problem is that the Ionic color CSS variables are used for so many different CSS properties that it wouldn’t work to add a gradient through the base CSS variable that the colors use, thus making it hard to pass a gradient background using our color property. For example, our checkbox uses the base of the color (--ion-color-base defined for each color here: https://github.com/ionic-team/ionic/blob/master/core/src/css/core.scss#L36-L56) for a border and background color.

We added the color property so users can quickly theme some component colors with a single property, without having to dive into the CSS of it all. While I understand your use case, it is complex and not what color was intended for. We decided that the most common use case: styling all of the buttons with a quick background change, should be the default. Developers should be able to change the background/color of buttons by adding CSS, or quickly add color to use the colors we provide.

Using my 1st example above would allow you to still use the Ionic colors with the gradients, without having to hardcode the value of the Ionic colors.

Now developers will need to think about which color/gradient classes to add.

I think I would be able to help more if I could see how people are using this application. It sounds like you are creating a single app that can have the colors changed based on the company?

If you really wanted to, you could override the CSS variables that the color uses, but this is not part of the public API, it is how Ionic sets the colors internally:

ion-button.ion-color-primary {
  --ion-color-base: linear-gradient(
    to bottom,
    var(--ion-color-primary) 0%,
    var(--ion-color-primary-contrast) 100%
  ) !important;
}

https://codepen.io/brandyscarney/pen/daNPox?editors=1100

[fifafu]

Exactly 😃 That’s my main goal, developers should just be able to use the Ionic docs. This approach has been working great for us since Ionic 1.

They still need to load the theme and our custom component package, but apart from that they can just use whatever code snippet they find in the community / docs and still have the basic corporate design.