In customizer Gulpfile, ensure color variables passed in are all merged into $foundat...

diff --git a/customizer/complete.json b/customizer/complete.json
index d986cb840a473358ba5f5f71a4ef2d39b57874cc..3ec9134cf54126d5d77bc5104d964805eaa2845d 100644 (file)
--- a/customizer/complete.json
+++ b/customizer/complete.json
@@ -43,5 +43,8 @@
     "visibility",
     "float"
   ],
-  "variables": {}
+  "variables": {
+    "primary-color": "#2199e8",
+    "alert-color": "#ec5840"
+  }
 }

diff --git a/customizer/lib/sass.js b/customizer/lib/sass.js
index 96b2760beca34874ab120bc2abd7ad742f2f6f7f..74c09c4d85283399360bfcab1da24b25cd6ab57b 100644 (file)
--- a/customizer/lib/sass.js
+++ b/customizer/lib/sass.js
@@ -1,6 +1,6 @@
 var empty = require('is-empty-object');
 var format = require('util').format;
-var multiline = require('multiline');
+var multiline = require('multiline').stripIndent;
 
 var SASS_TEMPLATE = multiline(function() {/*
   @charset 'utf-8';
@@ -28,8 +28,8 @@ var SASS_TEMPLATE = multiline(function() {/*
  * @returns {String} Formatted Sass file.
  */
 module.exports = function(config, modules, variables) {
-  var CONFIG = config;
   var variableList = [];
+  var colorList = {};
   var exportList = ['@include foundation-global-styles;'];
 
   if (empty(modules)) {
@@ -39,17 +39,36 @@ module.exports = function(config, modules, variables) {
   // Create variable overrides code
   for (var i in variables) {
     var name = i.replace('_', '-');
-    variableList.push(format('$%s: %s;', name, variables[i]));
+    if (name.match(/-color$/)) {
+      var key = name.replace('-color', '');
+      colorList[key] = variables[i];
+    }
+    else {
+      variableList.push(format('$%s: %s;', name, variables[i]));
+    }
   }
 
+  variableList.push(createPaletteMap(colorList));
+
   // Create module exports with @include
   for (var i in modules) {
     var name = modules[i];
 
-    if (CONFIG[name] && CONFIG[name].sass) {
-      exportList.push(format('@include foundation-%s;', CONFIG[name].sass));
+    if (config[name] && config[name].sass) {
+      exportList.push(format('@include foundation-%s;', config[name].sass));
     }
   }
 
-  return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n  '))
+  return format(SASS_TEMPLATE, variableList.join('\n'), exportList.join('\n'))
+}
+
+function createPaletteMap(colors) {
+  var output = '$foundation-palette: (%s\n);';
+  var keys = '';
+
+  for (var i in colors) {
+    keys += format('\n  %s: %s,', i, colors[i]);
+  }
+
+  return format(output, keys);
 }