From: Geoff Kimball <geoff@zurb.com>
Date: Wed, 23 Dec 2015 21:38:35 +0000 (-0800)
Subject: Use new public $foundation-palette Sass variable to edit the main color palette.... 
X-Git-Tag: v6.2.0-rc.1~84
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=27cd825ee585e24e308cdcda84faade5bf5331c4;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Use new public $foundation-palette Sass variable to edit the main color palette. The old variables still work, but map to the values in $foundation-palette. #7219
---

diff --git a/scss/_global.scss b/scss/_global.scss
index 6240c401a..a66e295f4 100644
--- 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 6471a2ce6..c3c0112d2 100644
--- 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 29f3a4eb7..b5d06611c 100644
--- 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 8602dd0fc..21e1b3c5f 100644
--- 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 487343cad..9a8cd6614 100644
--- 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 75d3cf5b9..6fb1864a8 100644
--- 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 739b614a1..0313768d4 100644
--- 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;