From: Andy Cochran Date: Tue, 6 Dec 2016 05:05:50 +0000 (-0500) Subject: update docs for Global Styles > Colors X-Git-Tag: v6.3.0-rc2~4^2~4 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f62e767719d29a96d3dac10d8373a94554d92a1d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git update docs for Global Styles > Colors --- diff --git a/docs/pages/global.md b/docs/pages/global.md index 86276f13b..14fc2f529 100644 --- a/docs/pages/global.md +++ b/docs/pages/global.md @@ -16,66 +16,64 @@ The default font size is set to 100% of the browser style sheet, usually 16 pixe ## Colors -All interactive elements in Foundation, such as links and buttons, use the same color. The default shade of blue you see all over Foundation comes from the `$primary-color` Sass variable. - -Many components can also be colored with four other colors: secondary, alert, success, and warning. Use these colors to give more context to UI elements and actions. +Foundation has an accessible default color palette. The primary color is used for interactive elements, such as links and buttons. The secondary, success, warning, and alert colors are used to give more context to UI elements and actions.
-
+
-

Primary

+

Primary

-
+

Secondary

-
+

Success

-
+

Warning

-
+

Alert

-
+

White

-
+

Light Gray

-
+

Medium Gray

-
+

Dark Gray

-
+

Black

@@ -83,47 +81,49 @@ Many components can also be colored with four other colors: secondary, alert, su
-If you're using the Sass version of Foundation, it's possible to edit the default color palette, by changing the `$foundation-palette` variable in your settings file. The only required colors are ones named "primary" and "alert". The names used in the palette will be output as CSS classes. +--- -```scss -$foundation-palette: ( - primary: #E44347, - mars: #D7525C, - saturn: #E4B884, - neptune: #5147D7, -) -``` +### Changing the Color Palette -Using the above palette, we can add the `.mars`, `.saturn`, or `.neptune` classes to buttons, labels, badges, and more. +If you're using the Sass version of Foundation, you can easily change the color palette by editing the variables in your settings file. -To access the colors in your code, use Foundation's `get-color()` function: +The semantic colors (primary, secondary, success, warning, and alert) can be changed in the `$foundation-palette` map. The keys in this map are referenced by various settings to style components and output alternate class names. ```scss -.mars { - color: get-color(mars); -} +$foundation-palette: ( + primary: #1779ba, + secondary: #767676, + success: #3adb76, + warning: #ffae00, + alert: #cc4b37, +); ```
-

If you're upgrading an older version of Foundation 6 to 6.2, add the line @include add-foundation-colors; below the Global section of your settings file. This will allow legacy color variables, such as $primary-color and $secondary-color, to continue working. +

If you remove a default key from `$foundation-palette`, be sure to edit any variables in your settings file that reference that color.

---- +The named colors (white, light gray, medium gray, dark gray, and black) can be changed in their respective variables -### Color Classes +```scss +$light-gray: #e6e6e6; +$medium-gray: #cacaca; +$dark-gray: #8a8a8a; +$black: #0a0a0a; +$white: #fefefe; +``` -Some components, such as [buttons](button.html), [callouts](callout.html), and [labels](label.html), have *coloring classes*, which let you change the color of the element by adding the name of the color as a CSS class. +The line `@include add-foundation-colors;` in your settings file allows you to use the following Sass variables to reference *default colors* from the palette: -```html_example - - -``` +- `$primary-color` +- `$secondary-color` +- `$success-color` +- `$warning-color` +- `$alert-color` -```html_example -
-

Created a new folder.

-
-
-

Error fetching stick.

-
+You can also use Foundation's `get-color()` function to reference *any color* from the palette. This function gives you access to custom colors you've added to the palette. + +```scss +// Create a variable for my custom color. +$custom-color: get-color(custom); ```