Skip to content

Variable darken percentage for emphasized links#25575

Merged
XhmikosR merged 3 commits intotwbs:v4-devfrom
MartijnCuppens:text-emphasis-link
Oct 23, 2018
Merged

Variable darken percentage for emphasized links#25575
XhmikosR merged 3 commits intotwbs:v4-devfrom
MartijnCuppens:text-emphasis-link

Conversation

@MartijnCuppens
Copy link
Copy Markdown
Member

Closes #25574.

@andresgalante
Copy link
Copy Markdown
Collaborator

Hi @MartijnCuppens you are right they both should be 15%.

I don't think the implementation is correct though.

$link-hover-color: is allowing users to change the way they do hover, they can even change it to be lighten or any other function.

As you mention the text-emphasized mixin is hardcoding it.

By generating a variable to change the percentage we'd be allowing users to customize how dark the link color can be, but it's not flexible enough to produce the same results they'd get from changing $link-hover-color:.

Therefore I suggest a new variable like:

$text-hover-color:                        darken($color, 15%) 

What do you think?

@MartijnCuppens
Copy link
Copy Markdown
Member Author

And how would you implement this $text-hover-color? Wouldn't this make all the hover colors of all links with a text-* color class the same?

@MartijnCuppens
Copy link
Copy Markdown
Member Author

I've got an idea. We could calculate the difference in lightness between $link-color and $link-hover-color with the lightness() function and than darken (or even lighten) the hover color of emphasized links.

@MartijnCuppens
Copy link
Copy Markdown
Member Author

@andresgalante, what do you thing of the latest changes? This doesn't require an extra variable and feels more flexible.

@andresgalante
Copy link
Copy Markdown
Collaborator

Hi @MartijnCuppens there are other color functions apart from lighten and darken. Let me think about this one and get back to you.

@mdo any good idea of how to make this flexible and consistent?

@mdo
Copy link
Copy Markdown
Member

mdo commented Sep 17, 2018

This one's tough. There's no real way to do what we do elsewhere—a variable for the entire thing like $link-hover-color. In this case, I think it's ultimately okay to limit things or have some constraints in an effort to avoid complexity. I think I'm fine with just a variable.

@MartijnCuppens
Copy link
Copy Markdown
Member Author

Jup, this was getting too complex indeed. I've reverted my changes to the initial commit. Is $emphasized-link-hover-darken-percentage a good name for the variable or do you have another suggestion, @mdo?

@XhmikosR
Copy link
Copy Markdown
Member

@mdo: your final call is yours.

@XhmikosR
Copy link
Copy Markdown
Member

@MartijnCuppens: this needs a rebase.

@MartijnCuppens
Copy link
Copy Markdown
Member Author

@XhmikosR, done.

@mdo mdo mentioned this pull request Oct 23, 2018
@XhmikosR XhmikosR merged commit 1c91f48 into twbs:v4-dev Oct 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants