Skip to content

Improve gradients and add .bg-gradient helper class#30583

Merged
XhmikosR merged 2 commits intomasterfrom
master-mc-update-linear-gradients
May 15, 2020
Merged

Improve gradients and add .bg-gradient helper class#30583
XhmikosR merged 2 commits intomasterfrom
master-mc-update-linear-gradients

Conversation

@MartijnCuppens
Copy link
Copy Markdown
Member

@MartijnCuppens MartijnCuppens commented Apr 14, 2020 •
edited by XhmikosR
Loading

  • Use a semitransparent gradient from light to dark which works on any background-color Restored
  • Store the gradient as a custom property (--bs-gradient)
  • Remove .bg-gradient-* variants in favour of .bg-gradient which works even when $enable-gradients are enabled
  • Add gradients to navbar, active page links and badges when gradients are enabled

TODO:

  • Open a PR to deprecate bg-gradient-variant() mixin in v4

Demo: https://deploy-preview-30583--twbs-bootstrap.netlify.app/docs/5.0/utilities/colors/#background-gradient

@mdo
Copy link
Copy Markdown
Member

mdo commented Apr 14, 2020

The white-black gradient blends with the background-color and makes it appear a little muddy as I call it—the black washes out the buttons and labels there. Gradients should be specific to each color.

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Apr 14, 2020

It also sort of looks not flat anymore, but maybe it's just my eyes. I personally prefer the current (flat) approach.

@ffoodd
Copy link
Copy Markdown
Contributor

ffoodd commented Apr 14, 2020

I agree with the visual diff, however I really like the simpler gradient helper.

May something like filters or blend modes be useful to improve the visual result?

XhmikosR
XhmikosR reviewed Apr 14, 2020
View reviewed changes
Comment thread site/content/docs/4.3/migration.md Outdated
Comment thread site/content/docs/4.3/migration.md Outdated
Comment thread site/content/docs/4.3/utilities/colors.md Outdated
@MartijnCuppens MartijnCuppens force-pushed the master-mc-update-linear-gradients branch from ba351a5 to 845cfc3 Compare April 14, 2020 18:58
@MartijnCuppens
Copy link
Copy Markdown
Member Author

MartijnCuppens commented Apr 14, 2020

Ok, removed the black in the gradient. The gradient is now a semi-transparent white gradient, which has the same effect as the Sass mix() with white.

You can test the buttons by adding .bg-gradient.

@MartijnCuppens MartijnCuppens marked this pull request as ready for review April 14, 2020 19:54
@MartijnCuppens MartijnCuppens requested a review from a team as a code owner April 14, 2020 19:54
ffoodd
ffoodd reviewed Apr 15, 2020
View reviewed changes
Comment thread scss/forms/_form-check.scss Outdated
ffoodd
ffoodd reviewed Apr 15, 2020
View reviewed changes
Comment thread site/content/docs/4.3/utilities/colors.md Outdated
@XhmikosR XhmikosR force-pushed the master-mc-update-linear-gradients branch from 52377fe to 216c8b7 Compare April 15, 2020 13:22
@MartijnCuppens MartijnCuppens mentioned this pull request Apr 15, 2020
Merged
@MartijnCuppens MartijnCuppens changed the title Improve gradients Improve gradients and add .bg-gradient helper class Apr 18, 2020
@MartijnCuppens
Copy link
Copy Markdown
Member Author

MartijnCuppens commented Apr 18, 2020

FYI: the deprecation PR was merged, but this one isn't yet.

@XhmikosR XhmikosR requested a review from mdo April 18, 2020 11:13
@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Apr 18, 2020

FYI: the deprecation PR was merged, but this one isn't yet.

In the future you should put a TODO in the PRs referencing the order of merging.

@ffoodd
Copy link
Copy Markdown
Contributor

ffoodd commented Apr 22, 2020

LGTM. @mdo @XhmikosR do colors look better?

@MartijnCuppens MartijnCuppens force-pushed the master-mc-update-linear-gradients branch from 6d5bfc3 to 6ecce96 Compare April 27, 2020 14:38
@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Apr 28, 2020

Sorry, I missed the notification. I'd like @mdo's opinion on this before merging.

I think it looks OK AFAICT.

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Apr 30, 2020

@mdo it would make sense to land this sooner than later since the v4 deprecation patch has landed.

MartijnCuppens and others added 2 commits May 15, 2020 14:58
@MartijnCuppens @XhmikosR
Improve gradients
e8b7118 
- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
@XhmikosR
migration.md: a few grammar fixes
fe9dcc2
@XhmikosR XhmikosR force-pushed the master-mc-update-linear-gradients branch from 08d3885 to fe9dcc2 Compare May 15, 2020 11:59
@XhmikosR XhmikosR merged commit 01d1d6b into master May 15, 2020
@XhmikosR XhmikosR deleted the master-mc-update-linear-gradients branch May 15, 2020 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@XhmikosR XhmikosR XhmikosR left review comments

@mdo mdo mdo approved these changes

+1 more reviewer

@ffoodd ffoodd ffoodd approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

css no-backport-to-v4 v5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@MartijnCuppens @mdo @XhmikosR @ffoodd