[Button] Refactor button gradients

[llorca]

Follow up from #1367

Changes proposed in this pull request:

• Remove linear-gradient-with-fallback mixin and rely on straight CSS
  • Good browser support: http://caniuse.com/#search=linear-gradient)
• Gradients on buttons are !default variables that can be customized like all the other ones

[blueprint-bot]

Refactor button gradients

Preview: documentation
Coverage: core | datetime

[giladgray]

noticed a very subtle change to default button styles--they're flatter now. (intent buttons look great.)

before:

after:

[giladgray]

do you need to repeat same background-image in pseudo states like :hover (compare to line 165)?
in devtools, it seems safe to remove.

this comment applies several times throughout the changed files, i'm just gonna leave this one comment for them all.

[llorca]

Yeah, looks fine

[blueprint-bot]

Remove unnecessary background-image on hover

Preview: documentation
Coverage: core | datetime

[pkwi]

I'm not sure about the new flatter buttons. Any chance we can reproduce the old gradient style?

[llorca]

@pkwi that's just a refactor, not a change. Buttons didn't get flatter :)

Edit: just realizing that default buttons used to have a different gradient than default button hovered... On it with Piotr offline for a clarification

[llorca]

With 70% opacity for $button-gradient, here's what we get:

Compare to before:

Seems pretty legit, gonna push a commit now and wait for @pkwi confirmation tomorrow.

[blueprint-bot]

70% gradient opacity for default light button

Preview: documentation
Coverage: core | datetime

[blueprint-bot]

Bump default gradient to 80%

Preview: documentation | table
Coverage: core | datetime

[pkwi]

80% looks good to me.

[giladgray]

this is awesome

[cmslewis]

Everything affected in the refactor seems good to me. what about gradients in menus, text inputs, etc? Any plan there?

[giladgray]

menus and inputs don't have background gradients, they have box-shadows. so we're 🆒

[omeid]

A bit late to the party, but perhaps the $button-gradient, $button-intent-gradient, and $dark-button-gradient could be called -background instead of -gradient?

[giladgray]

-gradient is accurate because it is used as background-image (one of many background sub-properties) and the value is actually a gradient, not any of the other valid background values.

We name our sass variables for their type: -color, -size, etc. So -gradient is consistent, but -background is not.

[omeid]

Right, that is a good point! I overlooked that there was also background-color, perhaps -background-image? to along with button-background-color and so? It just that gradient describes the content of the variable (the details about the background image being a gradient) instead of what, which is a reference to an image used for background.