search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: Changing font color of button with background color and outline does not work #20822

Closed ghost closed 4 years ago

ghost commented 4 years ago

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Button's color is set the same as it's background color (in my case *color="primary") Expected behavior:

Button's color should be able to be changed by setting the --color scss property. Additionally, when a button has color="primary" its text should be --ion-primary-color-contrast and not --ion-primary-color. Steps to reproduce:

Add an ion-button with color="primary" and fill="outline". Then try to set the text color in scss with the property --color: ??? Related code: https://jsfiddle.net/gfzevhsu/2/

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

Ionic:

Ionic CLI : 5.4.6 (/usr/lib/node_modules/ionic) Ionic Framework : @ionic/angular 5.0.1 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.3.25 @angular/cli : 8.3.25 @ionic/angular-toolkit : 2.1.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v10.15.3 (/root/.nvm/versions/node/v10.15.3/bin/node) npm : 6.4.1 OS : Linux 4.4

liamdebeasi commented 4 years ago

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. If you want to theme your ion-button you should use either the CSS Variables provided or the color property, but not both.

ionitron-bot[bot] commented 4 years ago

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.