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

adding color utility contrast function #18478

Closed
wants to merge 10 commits into from
Closed

adding color utility contrast function #18478

wants to merge 10 commits into from

Conversation

bassjobsen
Copy link
Contributor

according to: #18119

Some notices:

  1. I introduced $lightes-color and $darkest-color, see also v4: hardcoded white values (#fff) in both _cards.scss and mixins/background_variants.scss #18118
  2. using the color-contrast function means that some .bg variant got the lightest font whilst other got the darkest using brand colors. The same possible may happens for buttons. From the aesthetic point of view you possible prefer having all buttons the same font color. Accessibility tells you to do something different when not changing brand colors, also see: https://github.com/bassjobsen/bootstrap-a11y-theme
  3. i'm not sure how to attribute Compass for using the functions

@if $color == null {
@return null;
}
@else {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@else should be placed on same line as previous curly brace

@cvrebert
Copy link
Collaborator

  1. i'm not sure how to attribute Compass for using the functions

Since the code here is less trivial, I would propose copying https://github.com/Compass/compass/blob/stable/LICENSE.markdown (except for its last paragraph) into a comment header in scss/utilities/color/_contrast.scss
And also a quick // Credit: Compass (https://github.com/Compass/compass)

@cvrebert
Copy link
Collaborator

Could you undo/remove the dist/ changes? They're causing merge conflicts.

@if type-of($color) == color {
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
}
@else {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@else should be placed on same line as previous curly brace

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@else should be placed on same line as previous curly brace

@mdo
Copy link
Member

mdo commented Feb 7, 2016

Going to punt on this for now, thanks though!

@mdo mdo closed this Feb 7, 2016
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.

4 participants