Should button-variant function allow a manually-specified color?
Created by: jrochkind
In Bootstrap 3, the button-variant function/mixin had this signature:
@mixin button-variant($color, $background, $border)
You specified the (text) color, background color, and border. Other values (such as focus/hover colors) were computed automatically derived from these.
In Bootstrap 4, the button-variant function/mixi has this signature instead:
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
You specify, at least, the background and border color. All other values are computed derived from those. You can optionally specify your hover and active border/backgrounds instead. The built-in uses of button-variant only specify $background and $border (and actually specify $border to be the same value as $background), and allow the default computation for the rest.
There is no way to manually specify the actual (text/foreground) color
as an option though -- for default, hover, or active. You are stuck with the computed/derived value based on contrasting colors with specified/default backgrounds.
If you wanted to manually override this to something that worked better, for your particular palette or branding stylesheet, than the automatically computed value, you could do it by applying button-variant mixin and then providing CSS overrides -- but the need to deal with all the pseudo-selectors and nesting (which can be complex and non-obvious ) makes this kind of challenging to do in a reliable way.
Should button-variant function allow optional arguments with manually specified color
values? Which if not provided, would still default to the automatically computed value with color-yiq
and relevant background color.