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.

Sign up for GitHub

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

Jump to bottom

Ally-compliant color palette & functions #9319

Merged
merged 18 commits into from
Nov 28, 2016
Merged

Ally-compliant color palette & functions #9319

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9f80685
tweak palette to meet AA contrast req
Oct 30, 2016
86acf95
swap lightness/forground function for luminance method
Nov 1, 2016
98b8226
add math utility for luminance method
Nov 1, 2016
4bd3657
replace all instances of foreground() with pick-best-color()
Nov 1, 2016
d3b0671
bring back button-color-alt
Nov 2, 2016
c720183
ditch function for tabs content color, allow tabs mixins to pass vars
Nov 2, 2016
bf45095
add badge-color-alt var for pick-best-color()
Nov 2, 2016
2306a8a
add badge-color-alt var for pick-best-color()
Nov 2, 2016
e1ea3c6
add label-color-alt var for pick-best-color()
Nov 2, 2016
30adb30
ditch function for accordion content color, allow accordion mixins to…
Nov 2, 2016
ccd29a8
ditch function for pagination item color
Nov 2, 2016
3908e8d
allow pagination mixins to pass vars
Nov 2, 2016
44f4a2b
pick-best-color() to color-pick-contrast(), update its comment
Nov 2, 2016
d2ad228
import math function in color scss
andycochran Nov 10, 2016
482407a
replace all instances of foreground() with pick-best-color()
Nov 1, 2016
c630cba
bring back button-color-alt
Nov 2, 2016
a516f08
pick-best-color() to color-pick-contrast(), update its comment
Nov 2, 2016
8f12ab5
nix duplicate line
Nov 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Badges can be colored with the same classes used for buttons and other component
An icon can be used in place of text. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.

```html_example
<span class="info badge"><i class="fi-share"></i></span>
<span class="secondary badge"><i class="fi-share"></i></span>
<span class="success badge"><i class="fi-check"></i></span>
<span class="warning badge"><i class="fi-wrench"></i></span>
```
11 changes: 6 additions & 5 deletions docs/pages/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,12 @@ Give a button additional meaning by adding a coloring class, or `.disabled` to c
</div>

```html_example
<a class="secondary button" href="#">Secondary Color</a>
<a class="success button" href="#">Success Color</a>
<a class="alert button" href="#">Alert Color</a>
<a class="warning button" href="#">Warning Color</a>
<a class="disabled button" href="#">Disabled Button</a>
<a class="button" href="#">Primary</a>
<a class="secondary button" href="#">Secondary</a>
<a class="success button" href="#">Success</a>
<a class="alert button" href="#">Alert</a>
<a class="warning button" href="#">Warning</a>
<a class="disabled button" href="#">Disabled</a>
```

---
Expand Down
6 changes: 3 additions & 3 deletions scss/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ $global-lineheight: 1.5 !default;
/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
/// @type Map
$foundation-palette: (
primary: #2199e8,
secondary: #777,
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #ec5840,
alert: #cc4b37,
Copy link
Contributor

Choose a reason for hiding this comment

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

If you have a reference for these colors, can you add the link in comment ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure I understand what you're asking for. Do you mean adding something like this as an inline comment for each of the colors?

// http://webaim.org/resources/contrastchecker/?fcolor=ffffff&bcolor=cc4b37

Copy link
Contributor

Choose a reason for hiding this comment

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

I mean : How did you find that we should use these particular colors, and not, for example, #cc4b38 ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I used Photoshop to incrementally adjust the original color's luminosity (keeping the same hue and saturation, changing only the brightness), checking each incremental change in the WebAIM Contrast Checker, until the change allowed the new color to meet AA requirements.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok. I think it could be useful to add the link to test the contrast, with an explanation.

) !default;

/// Color used for light gray UI items.
Expand Down
47 changes: 30 additions & 17 deletions scss/components/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ $accordion-title-font-size: rem-calc(12) !default;

/// Default text color for items in a Menu.
/// @type Color
$accordion-item-color: foreground($accordion-background, $primary-color) !default;
$accordion-item-color: $primary-color !default;

/// Default background color on hover for items in a Menu.
/// @type Color
Expand All @@ -40,16 +40,18 @@ $accordion-content-border: 1px solid $light-gray !default;

/// Default text color of tab content.
/// @type Color
$accordion-content-color: foreground($accordion-content-background, $body-font-color) !default;
$accordion-content-color: $body-font-color !default;

/// Default padding for tab content.
/// @type Number | List
$accordion-content-padding: 1rem !default;

/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
@mixin accordion-container {
@mixin accordion-container (
$background: $accordion-background
) {
margin-#{$global-left}: 0;
background: $accordion-background;
background: $background;
list-style-type: none;
}

Expand All @@ -65,26 +67,32 @@ $accordion-content-padding: 1rem !default;
}

/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
@mixin accordion-title {
@mixin accordion-title (
$padding: $accordion-item-padding,
$font-size: $accordion-title-font-size,
$color: $accordion-item-color,
$border: $accordion-content-border,
$background-hover: $accordion-item-background-hover
) {
position: relative;
display: block;
padding: $accordion-item-padding;
padding: $padding;

border: $accordion-content-border;
border: $border;
border-bottom: 0;

font-size: $accordion-title-font-size;
font-size: $font-size;
line-height: 1;
color: $accordion-item-color;
color: $color;

:last-child:not(.is-active) > & {
border-bottom: $accordion-content-border;
border-bottom: $border;
border-radius: 0 0 $global-radius $global-radius;
}

&:hover,
&:focus {
background-color: $accordion-item-background-hover;
background-color: $background-hover;
}

@if $accordion-plusminus {
Expand All @@ -103,18 +111,23 @@ $accordion-content-padding: 1rem !default;
}

/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
@mixin accordion-content {
@mixin accordion-content (
$padding: $accordion-content-padding,
$border: $accordion-content-border,
$background: $accordion-content-background,
$color: $accordion-content-color
) {
display: none;
Copy link
Contributor

Choose a reason for hiding this comment

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

display before padding

Please rebase, then run gulp sass:lint ;)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

gulp lint:sass 😉

padding: $accordion-content-padding;
padding: $padding;

border: $accordion-content-border;
border: $border;
border-bottom: 0;
background-color: $accordion-content-background;
background-color: $background;

color: $accordion-content-color;
color: $color;

:last-child > &:last-child {
border-bottom: $accordion-content-border;
border-bottom: $border;
}
}

Expand Down
8 changes: 6 additions & 2 deletions scss/components/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ $badge-background: $primary-color !default;

/// Default text color for badges.
/// @type Color
$badge-color: foreground($badge-background) !default;
$badge-color: $white !default;

/// Alternate text color for badges.
/// @type Color
$badge-color-alt: $black !default;

/// Default padding inside badges.
/// @type Number
Expand Down Expand Up @@ -49,7 +53,7 @@ $badge-font-size: 0.6rem !default;
@if $name != primary {
&.#{$name} {
background: $color;
Copy link
Contributor

Choose a reason for hiding this comment

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

We should rename $color by $background here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure about this. The $foundation-palette is a list of colors, not a list of backgrounds. We're using a $color from the palette to set a background. Seems logical as-is to me.

color: foreground($color);
color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions scss/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
/// @type List
$button-color: $white !default;

/// Font color for buttons, if the background is light.
/// Alternative font color for buttons.
/// @type List
$button-color-alt: $black !default;

Expand Down Expand Up @@ -114,7 +114,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
$background-hover-lightness: $button-background-hover-lightness
) {
@if $color == auto {
$color: foreground($background, $button-color-alt, $button-color);
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
}

@if $background-hover == auto {
Expand Down
8 changes: 6 additions & 2 deletions scss/components/_label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ $label-background: $primary-color !default;

/// Default text color for labels.
/// @type Color
$label-color: foreground($label-background) !default;
$label-color: $white !default;

/// Alternate text color for labels.
/// @type Color
$label-color-alt: $black !default;

/// Default font size for labels.
/// @type Number
Expand Down Expand Up @@ -50,7 +54,7 @@ $label-radius: $global-radius !default;
@if $name != primary {
&.#{$name} {
background: $color;
color: foreground($color);
color: color-pick-contrast($color, ($label-color, $label-color-alt));
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion scss/components/_orbit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ $orbit-control-zindex: 10 !default;
padding: $orbit-caption-padding;

background-color: $orbit-caption-background;
color: foreground($orbit-caption-background);
color: color-pick-contrast($orbit-caption-background);
background-color: $orbit-caption-background;
Copy link
Contributor

Choose a reason for hiding this comment

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

"background-color: $orbit-caption-background;" is duplicated line 98 and 100

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ack! Must've missed that when rebasing and fixing a merge conflict. I'll clean this up…

}

/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
Expand Down
56 changes: 37 additions & 19 deletions scss/components/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $pagination-item-background-current: $primary-color !default;

/// Text color of the pagination item for the current page.
/// @type Color
$pagination-item-color-current: foreground($pagination-item-background-current) !default;
$pagination-item-color-current: $white !default;

/// Text color of a disabled pagination item.
/// @type Color
Expand All @@ -66,16 +66,24 @@ $pagination-mobile-current-item: false !default;
$pagination-arrows: true !default;

/// Adds styles for a pagination container. Apply this to a `<ul>`.
@mixin pagination-container {
@mixin pagination-container (
$margin-bottom: $pagination-margin-bottom,
$font-size: $pagination-font-size,
$spacing: $pagination-item-spacing,
$radius: $pagination-radius,
$color: $pagination-item-color,
$padding: $pagination-item-padding,
$background-hover: $pagination-item-background-hover
) {
@include clearfix;
margin-#{$global-left}: 0;
margin-bottom: $pagination-margin-bottom;
margin-bottom: $margin-bottom;

// List item
li {
margin-#{$global-right}: $pagination-item-spacing;
border-radius: $pagination-radius;
font-size: $pagination-font-size;
margin-#{$global-right}: $spacing;
border-radius: $radius;
font-size: $font-size;

@if $pagination-mobile-items {
display: inline-block;
Expand Down Expand Up @@ -104,28 +112,35 @@ $pagination-arrows: true !default;
a,
button {
display: block;
padding: $pagination-item-padding;
padding: $padding;
border-radius: $global-radius;
color: $pagination-item-color;
color: $color;

&:hover {
background: $pagination-item-background-hover;
background: $background-hover;
}
}
}

/// Adds styles for the current pagination item. Apply this to an `<a>`.
@mixin pagination-item-current {
padding: $pagination-item-padding;
background: $pagination-item-background-current;
color: $pagination-item-color-current;
@mixin pagination-item-current (
$padding: $pagination-item-padding,
$background-current: $pagination-item-background-current,
$color-current: $pagination-item-color-current
) {
padding: $padding;
background: $background-current;
color: $color-current;
cursor: default;
}

/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
@mixin pagination-item-disabled {
padding: $pagination-item-padding;
color: $pagination-item-color-disabled;
@mixin pagination-item-disabled (
$padding: $pagination-item-padding,
$color: $pagination-item-color-disabled
) {
padding: $padding;
color: $color;
cursor: not-allowed;

&:hover {
Expand All @@ -134,10 +149,13 @@ $pagination-arrows: true !default;
}

/// Adds styles for an ellipsis for use in a pagination list.
@mixin pagination-ellipsis {
padding: $pagination-item-padding;
@mixin pagination-ellipsis (
$padding: $pagination-item-padding,
$color: $pagination-ellipsis-color
) {
padding: $padding;
content: '\2026';
color: $pagination-ellipsis-color;
color: $color;
}

@mixin foundation-pagination {
Expand Down