Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 1 commit into from

Conversation

ffoodd
Copy link
Member

@ffoodd ffoodd commented Apr 10, 2020

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:

@XhmikosR
Copy link
Member

XhmikosR commented Apr 10, 2020

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 🙂

@XhmikosR XhmikosR marked this pull request as draft April 10, 2020 19:25
@mdo
Copy link
Member

mdo commented Apr 10, 2020

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
Copy link
Member Author

ffoodd commented Apr 10, 2020

@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
Copy link
Member Author

ffoodd commented Apr 20, 2020

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.

@ffoodd ffoodd closed this Apr 20, 2020
@ffoodd ffoodd deleted the master-fod-dark-background-examples branch April 20, 2020 08:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants