Outline buttons & colored links: set bg-dark where appropriate

[ffoodd]

As mentionned in #30548, some components examples need a better background. link-light is totally invisible in master right now!

This is a first attempt, adding a simple container with .bg-dark for info, light and warning variants. Not very pleasant visually I guess, feel free to discuss :)

Preview:

• https://deploy-preview-30551--twbs-bootstrap.netlify.com/docs/4.3/components/buttons/#outline-buttons
• https://deploy-preview-30551--twbs-bootstrap.netlify.com/docs/4.3/helpers/colored-links/

[XhmikosR]

TBH I don't like it at all :/

EDIT: I mean, mostly due to the snippet mess. I guess we could work around this by use a <div class="example> manually. So, if we agree on the look, I can have a look at the rest 🙂

[mdo]

Perhaps we instead add a new key-value pair to the relevant colors in our theme-colors.yml and check for that instead? I thought I saw a PR to do this for color contrast or something else?

[ffoodd]

@mdo #30044 is the one 🙂 And it could help a lot with some of my other PR (color-contrast() failures, at least).

I don't like neither the multiple conditions to add a tag, but wanted to start something and have something to look at.

I also find the visual part quite messy: IMHO it'd be better to split the example box, with dark and light sides. Don't know how to do yet.

[ffoodd]

So, to sum up things here: choosing the contrast color will be tackled in #30044, so this one might be closed—and another one opened after #30044 get merged to tackle the design part of those backgrounds. I'll document this right away to follow up.