Finalize use of $foundation-palette in the codebase, and add documentation for it

diff --git a/docs/pages/global.md b/docs/pages/global.md
index c6c7c8d9a76c0f8224891809255a27962174adef..add7bdf766424b10af90e6f586cfcfac6181a9a9 100644 (file)
--- a/docs/pages/global.md
+++ b/docs/pages/global.md
@@ -81,6 +81,18 @@ Many components can also be colored with four other colors: secondary, alert, su
   </div>
 </div>
 
+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 color is one named "primary". The names used in the palette will be output as CSS classes.
+
+```scss
+$foundation-palette: (
+  primary: #E44347,
+  mars: #D7525C,
+  saturn: #E4B884,
+  neptune: #5147D7,
+)
+```
+
+Using the above palette, we can add the `.mars`, `.saturn`, or `.neptune` classes to buttons, labels, badges, and more.
 
 ---
 

diff --git a/scss/_global.scss b/scss/_global.scss
index 2eef7ce62c99ae3fe3c9971225c8bdc857775072..5a338f9f9e017587db4bc0833e9f4d1ae3abdf5c 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -26,8 +26,8 @@ $foundation-palette: (
   primary: #2199e8,
   secondary: #777,
   success: #3adb76,
-  alert: #ffae00,
-  warning: #ec5840,
+  warning: #ffae00,
+  alert: #ec5840,
 ) !default;
 
 /// Color used for light gray UI items.

diff --git a/scss/forms/_error.scss b/scss/forms/_error.scss
index 9e52b6e590ee9ea36e6e7cdd546a0b2dfee5c3b9..1af00d4b89c217c146a81094aea5a7349bd3192b 100644 (file)
--- a/scss/forms/_error.scss
+++ b/scss/forms/_error.scss
@@ -16,15 +16,15 @@ $abide-labels: true !default;
 
 /// Background color to use for invalid text inputs.
 /// @type Color
-$input-background-invalid: $alert-color !default;
+$input-background-invalid: map-get($foundation-palette, alert) !default;
 
 /// Color to use for labels of invalid inputs.
 /// @type Color
-$form-label-color-invalid: $alert-color !default;
+$form-label-color-invalid: map-get($foundation-palette, alert) !default;
 
 /// Default font color for form error text.
 /// @type Color
-$input-error-color: $alert-color !default;
+$input-error-color: map-get($foundation-palette, alert) !default;
 
 /// Default font size for form error text.
 /// @type Number