From: Andy Cochran Date: Wed, 7 Dec 2016 17:15:01 +0000 (-0500) Subject: switch from list to map for coloring classes X-Git-Tag: v6.3.0-rc2~4^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b2b2fb4f71ce57348346ae8ea9e162251817ace6;p=thirdparty%2Ffoundation%2Ffoundation-sites.git switch from list to map for coloring classes --- diff --git a/docs/pages/badge.md b/docs/pages/badge.md index d09e57642..3cc33e1a5 100644 --- a/docs/pages/badge.md +++ b/docs/pages/badge.md @@ -34,16 +34,49 @@ Finally, the content itself might need more context for users that use screen re Add color classes to give badges additional meaning. ```html_example -1 +1 2 3 A B ``` -
+--- + +### Custom Colors + +If you're using the Sass version of Foundation, you can customize the badge classes by editing the `$badge-palette` map in your settings file. The badge palette defaults to `$foundation-palette`. + +If you don't need certain colors from the default palette, simply remove them from the list. + +```scss +$badge-palette: map-remove($foundation-palette, ( + primary, + secondary +)) !default; +``` + +Or you can add more colors to the default palette. + +```scss +$badge-palette: map-merge($foundation-palette, ( + purple: #bb00ff +)) !default; +``` + +Or you can define your own custom badge palette. + +```scss +$badge-palette: ( + black: #000000, + red: #ff0000, + purple: #bb00ff +) !default; +``` + +--- -The `$badge-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain badge class, simply remove it from the list. +### Text Colors The text color for each badge class is determined by either `$badge-color` or `$badge-color-alt`, whichever settings variable has more contrast. @@ -53,7 +86,7 @@ The text color for each badge class is determined by either `$badge-color` or `$ --- -### With Icons +## Icons 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. diff --git a/docs/pages/button.md b/docs/pages/button.md index 1813fb4b8..c556f12fa 100644 --- a/docs/pages/button.md +++ b/docs/pages/button.md @@ -49,15 +49,49 @@ Additional classes can be added to your button to change its size and shape. Add color classes to give buttons additional meaning. ```html_example -Primary +Primary Secondary Success Alert Warning -Disabled ``` -The `$button-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain button class, simply remove it from the list. +--- + +### Custom Colors + +If you're using the Sass version of Foundation, you can customize the button classes by editing the `$button-palette` map in your settings file. The button palette defaults to `$foundation-palette`. + +If you don't need certain colors from the default palette, simply remove them from the list. + +```scss +$button-palette: map-remove($foundation-palette, ( + primary, + secondary +)) !default; +``` + +Or you can add more colors to the default palette. + +```scss +$button-palette: map-merge($foundation-palette, ( + purple: #bb00ff +)) !default; +``` + +Or you can define your own custom button palette. + +```scss +$button-palette: ( + black: #000000, + red: #ff0000, + purple: #bb00ff +) !default; +``` + +--- + +### Text Colors The text color for each button class is determined by either `$button-color` or `$button-color-alt`, whichever settings variable has more contrast. @@ -65,8 +99,18 @@ The text color for each button class is determined by either `$button-color` or

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value — but know that doing so may decrease accessibility.

+--- + +### Disabled Buttons + The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For ` +Disabled +``` + --- ## Hollow Style diff --git a/docs/pages/label.md b/docs/pages/label.md index 1484e49b9..7af4836a7 100644 --- a/docs/pages/label.md +++ b/docs/pages/label.md @@ -36,16 +36,49 @@ If an element is described by multiple labels, place multiple IDs inside of `ari Add color classes to give labels additional meaning. ```html_example -Primary Label +Primary Label Secondary Label Success Label Alert Label Warning Label ``` -
+--- + +### Custom Colors + +If you're using the Sass version of Foundation, you can customize the label classes by editing the `$label-palette` map in your settings file. The label palette defaults to `$foundation-palette`. + +If you don't need certain colors from the default palette, simply remove them from the list. + +```scss +$label-palette: map-remove($foundation-palette, ( + primary, + secondary +)) !default; +``` + +Or you can add more colors to the default palette. + +```scss +$label-palette: map-merge($foundation-palette, ( + purple: #bb00ff +)) !default; +``` + +Or you can define your own custom label palette. + +```scss +$label-palette: ( + black: #000000, + red: #ff0000, + purple: #bb00ff +) !default; +``` + +--- -The `$label-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain badge class, simply remove it from the list. +### Text Colors The text color for each label class is determined by either `$label-color` or `$label-color-alt`, whichever settings variable has more contrast. @@ -55,7 +88,7 @@ The text color for each label class is determined by either `$label-color` or `$ --- -### With Icons +## Icons An icon can be dropped into a label just fine. 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. diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss index c433d8aa2..3d5b6bab7 100644 --- a/scss/components/_badge.scss +++ b/scss/components/_badge.scss @@ -18,9 +18,9 @@ $badge-color: $white !default; /// @type Color $badge-color-alt: $black !default; -/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map. -/// @type List -$badge-classes: ( secondary success warning alert ) !default; +/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. +/// @type Map +$badge-palette: $foundation-palette !default; /// Default padding inside badges. /// @type Number @@ -53,9 +53,8 @@ $badge-font-size: 0.6rem !default; background: $badge-background; color: $badge-color; - @each $class in $badge-classes { - $color: get-color($class); - &.#{$class} { + @each $name, $color in $badge-palette { + &.#{$name} { background: $color; color: color-pick-contrast($color, ($badge-color, $badge-color-alt)); } diff --git a/scss/components/_button.scss b/scss/components/_button.scss index b3c3beb7c..0d7945be1 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -47,9 +47,9 @@ $button-sizes: ( large: 1.25rem, ) !default; -/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map. -/// @type List -$button-classes: ( secondary success warning alert ) !default; +/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. +/// @type Map +$button-palette: $foundation-palette !default; /// opacity for a disabled button. /// @type List @@ -230,19 +230,18 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau &.expanded { @include button-expand; } // Colors - @each $class in $button-classes { - $color: get-color($class); + @each $name, $color in $button-palette { @if $button-fill != hollow { - &.#{$class} { + &.#{$name} { @include button-style($color, auto, auto); } } @else { - &.#{$class} { + &.#{$name} { @include button-hollow-style($color); } - &.#{$class}.dropdown::after { + &.#{$name}.dropdown::after { border-top-color: $color; } } @@ -254,9 +253,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau @include button-hollow; @include button-hollow-style; - @each $class in $button-classes { - $color: get-color($class); - &.#{$class} { + @each $name, $color in $button-palette { + &.#{$name} { @include button-hollow-style($color); } } @@ -268,9 +266,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau &[disabled] { @include button-disabled; - @each $class in $button-classes { - $color: get-color($class); - &.#{$class} { + @each $name, $color in $button-palette { + &.#{$name} { @include button-disabled($color); } } diff --git a/scss/components/_label.scss b/scss/components/_label.scss index d3b81cae2..cf7cf7da4 100644 --- a/scss/components/_label.scss +++ b/scss/components/_label.scss @@ -18,9 +18,9 @@ $label-color: $white !default; /// @type Color $label-color-alt: $black !default; -/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map. -/// @type List -$label-classes: ( secondary success warning alert ) !default; +/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on. +/// @type Map +$label-palette: $foundation-palette !default; /// Default font size for labels. /// @type Number @@ -54,9 +54,8 @@ $label-radius: $global-radius !default; background: $label-background; color: $label-color; - @each $class in $label-classes { - $color: get-color($class); - &.#{$class} { + @each $name, $color in $label-palette { + &.#{$name} { background: $color; color: color-pick-contrast($color, ($label-color, $label-color-alt)); }