Cannot customize Button foreground color

[dozer75]

In the new beta the color style on buttons are calculated based on the background color to be either #111 or #fff, I have NO idea why are this limited now? It's a huge limitation when compared to the earlier versions.

In all other versions we have been able to set the exact color by changing the LESS (SASS in v4 alpha) variable which was an easy way to get it exactly how we needs it, now we will have to write our own .btn-* overrides to achieve the same with risk of loosing backwardscompatiblity later.

Please bring back the ability to set color using variables as before. The new system are really frustrating to work with.

[jacobmllr95]

Wouldn't it be a good idea to have a contrast-colors SASS map that is empty be default, where it's possible to define a contrast color for a given color. The color-yiq() function could the check against this map.

When no matching contrast color was found, the current behavior could be used.

IMHO this would solve the issue for all components.

[mdo]

The colors have been automated by a contrast checker to help enforce color contrast across customized themes. There should be an option to override though I suppose, and I do like the idea of a Sass map to merge for this.

Any chance you want to take a stab @jackmu95?

[jacobmllr95]

@mdo I will submit a pull request later today 👍

[CesarRotela]

@dozer75 Same thing to change the colors in the alerts, (Please bring back the ability to set color using variables as before. The new system are really frustrating to work with. +1)

[dozer75]

@CesarRotela There are a some issues around this as far as I can see, #23450 describes one of these, #23126 describes your issue.

[mwentz]

I think the biggest issue here is a lack of documentation and commenting. The color-yiq mixin does not give any context and it is not included in the /mixins folder. Any time it is used there should be a comment such as // sets 'color' automatically to contrast with background, see _functions.scss.

There should probably be variables for light button text and dark button text. It could be implemented like this:

in _functions.scss (inside @mixin color-yiq which starts at line 52 in the beta release)

  @if ($yiq >= 150) {
    color: $dark-button-text-variable-name;
  } @else {
    color: #light-button-text-variable-name;
  }

in _variables.scss (add new variables)

// set default text colors for light-colored and dark-colored buttons and badges. Careful, these should be set so that there is enough contrast for legibility.
$dark-button-text-variable-name: $gray-900 !default;
#light-button-text-variable-name: $white !default;

(I know that $gray-900 is a full shade lighter than #111 so that might not be the right choice.)

A few changes like this would make the button system much more understandable and customizable.

[mdo]

#23611 was merged, so closing out.