Add color module support

[Kingdutch]

The current gulp workflow creates some separate stylesheets for the color module preview (with a class prefix). This is not yet supported in Sweet Pea but should be added.

[Kingdutch]

The current implementation is the following:

// #########################
// Color preview
//
// We generate a separate prefixed stylesheet for the preview
// so it will affect any element outside the preview.
// #########################

const prefixCss = require('gulp-prefix-css');

gulp.task('preview-base', function () {
  return gulp.src([
    options.basetheme.css + 'base.css',
    options.basetheme.css + 'badge.css',
    options.basetheme.css + 'button.css',
    options.basetheme.css + 'cards.css',
    options.basetheme.css + 'comment.css',
    options.basetheme.css + 'form-controls.css',
    options.basetheme.css + 'form-elements.css',
    options.basetheme.css + 'form-post-create.css',
    options.basetheme.css + 'hero.css',
    options.basetheme.css + 'layout.css',
    options.basetheme.css + 'media.css',
    options.basetheme.css + 'navbar.css',
    options.basetheme.css + 'nav-tabs.css',
    options.basetheme.css + 'stream.css',
    options.basetheme.css + 'teaser.css'
  ])
    .pipe(concat('preview-base.css'))
    .pipe(prefixCss('.color-preview'))
    .pipe(gulp.dest(options.theme.root + 'color/css/'));
});

gulp.task('preview-blue', function () {
  return gulp.src(options.theme.components + 'preview.scss')
    .pipe(sass(options.sass).on('error', sass.logError))
    .pipe($.plumber({errorHandler: onError}))
    // run autoprefixer and media-query packer
    .pipe($.postcss(sassProcessors))
    // run rucksack @see https://simplaio.github.io/rucksack/
    .pipe($.rucksack())
    .pipe(prefixCss('.color-preview'))
    .pipe(gulp.dest(options.theme.css));
});

gulp.task('preview', ['preview-base', 'preview-blue']);