Use new public $foundation-palette Sass variable to edit the main color palette....

diff --git a/scss/_global.scss b/scss/_global.scss
index 6240c401a574bc7ff9851710a6ed5c736309cb5f..a66e295f4afb7e2c212f57ea55f1cbf0da580a26 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -20,25 +20,15 @@ $global-width: rem-calc(1200) !default;
 /// @type Number
 $global-lineheight: 1.5 !default;
 
-/// Primary color for interactive components like links and buttons.
-/// @type Color
-$primary-color: #2199e8 !default;
-
-/// Secondary color, used with components that support the `.secondary` class.
-/// @type Color
-$secondary-color: #777 !default;
-
-/// Color to indicate a positive status or action, used with the `.success` class.
-/// @type Color
-$success-color: #3adb76 !default;
-
-/// Color to indicate a caution status or action, used with the `.warning` class.
-/// @type Color
-$warning-color: #ffae00 !default;
-
-/// Color to indicate a negative status or action, used with the `.alert` class.
-/// @type Color
-$alert-color: #ec5840 !default;
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  alert: #ffae00,
+  warning: #ec5840,
+) !default;
 
 /// Color used for light gray UI items.
 /// @type Color
@@ -99,18 +89,20 @@ $global-radius: 0 !default;
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
 $global-text-direction: ltr !default;
 
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
+
 // Internal variables used for text direction
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
-// Internal map used to iterate through colors, to generate CSS classes with less code
-$foundation-colors: (
-  primary: $primary-color,
-  secondary: $secondary-color,
-  success: $success-color,
-  alert: $alert-color,
-  warning: $warning-color,
-) !default;
+// Internal variables used for colors
+$primary-color: map-get($foundation-palette, primary);
+$secondary-color: map-get($foundation-palette, secondary);
+$success-color: map-get($foundation-palette, success);
+$warning-color: map-get($foundation-palette, warning);
+$alert-color: map-get($foundation-palette, alert);
 
 @mixin foundation-global-styles {
   @include -zf-normalize;

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index 6471a2ce66f4d686e41e72bf11f94235c4f13459..c3c0112d2fcedfdd4f02fd1f58820acd6c3bf4af 100644 (file)
--- a/scss/components/_badge.scss
+++ b/scss/components/_badge.scss
@@ -43,7 +43,7 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 29f3a4eb7b4b8ee720236825203c3ace6f390e98..b5d06611cceb906f1e5e11fda9fcb08d92c9d80a 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -102,7 +102,7 @@ $buttongroup-expand-max: 6 !default;
     &.expanded { @include button-group-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} #{$buttongroup-child-selector} {
           @include button-style($color, auto, auto);

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 8602dd0fcaae96ab7da01275b23e2fe403f64cde..21e1b3c5f356dbbf75e6451bd837d7970bb1f7da 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -207,7 +207,7 @@ $button-opacity-disabled: 0.25 !default;
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} {
           @include button-style($color, auto);
@@ -230,7 +230,7 @@ $button-opacity-disabled: 0.25 !default;
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-colors {
+        @each $name, $color in $foundation-palette {
           &.#{$name} {
             @include button-hollow-style($color);
           }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index 487343cad26cdbda6e03f00e92315db36dfd57a1..9a8cd6614e970fb13c9867a0470a3dc55186315a 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -88,7 +88,7 @@ $callout-link-tint: 30% !default;
   .callout {
     @include callout;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         @include callout-style($color);
       }

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
index 75d3cf5b910e34d2ac5863c95e3d40742b6a9cbe..6fb1864a8b38f702329619f24fc0b6e8bdcee43b 100644 (file)
--- a/scss/components/_label.scss
+++ b/scss/components/_label.scss
@@ -44,7 +44,7 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;

diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss
index 739b614a18635c08541811e1168ba4f8c4872469..0313768d40dc1c90af074e45bcaadd0a13c84c20 100644 (file)
--- a/scss/components/_progress-bar.scss
+++ b/scss/components/_progress-bar.scss
@@ -62,7 +62,7 @@ $progress-radius: $global-radius !default;
   .progress {
     @include progress-container;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         .progress-meter {
           background-color: $color;