Automatic Color Swatches for Pattern Lab Node Gulp Mustache

0_Auto-Color-Swatches.md

Automatic Color Swatches for Pattern Lab Node Gulp Mustache

1. Install the necessary packages:

npm install --save-dev gulp-sass-json
npm install --save-dev gulp-rename
npm install --save-dev gulp-replace

2. Configure variables

Add the colors object to patternlab-config.json and configure your paths and filenames.

Remember that the JSON file must have the same name and be in the same directory as your color swatches mustache file.

3. Add task to gulpfile.js

Also add the task to patternlab:build, unless you only want to run it manually.

4. Configure swatches markup

See 00-colors.mustache for an example. If you change the name of your colors object, change it in this file too.

5. Test and tweak

Note: If you have multiple levels of variables (for example, $color-text: $color-gray-base), swatches will be generated but they will not have a background color. One workaround is to put these variables in a separate scss file.

Illustration

turns into:

colors.mustache

<ul class="sg-colors">
  {{#colors}}
  <li>
    <span class="sg-swatch" style="background: {{ hex-code }}"></span>
    <span class="sg-label">{{ color-name }}</span><br>
    <span class="sg-label">{{ hex-code }}</span>
  </li>
  {{/colors}}
</ul>

gulpfile.js

// Create Color Swatches
// Editing regex? Try https://regex101.com

var sassJson = require('gulp-sass-json');
var rename = require("gulp-rename");
var replace = require('gulp-replace');

function colors() {
  return config.colors;
}

gulp.task('pl-color-swatches', function () {
    return gulp
      .src(path.resolve(colors().paths.scss, colors().filenames.scss))
      .pipe(sassJson())
      .pipe(rename(colors().filenames.json))

      .pipe(replace(/\t\"/mg, '\t\t\{\n\t\t\t\"color\-name\"\: \"\$'))
      .pipe(replace(/",/g, '"\n\t\t\}\,'))
      .pipe(replace(/(\{\s+"\w+\S+\":\s\"?\$\w+\S+\")/gi, '$1,\n\t\t\t'))
      .pipe(replace(/(\s\:\s)/gi, '\t\"hex\-code\": '))
      .pipe(replace(/^{/g, '{\n\t"colors": ['))
      .pipe(replace(/}$/i, '\t\t\}\n\t\]\n\}'))

      .pipe(gulp.dest(colors().paths.json));
});

// Update the patternlab:build task
gulp.task('patternlab:build', gulp.series('pl-assets', 'pl-color-swatches', build));

patternlab-config.json

 "colors" : {
    "paths" : {
      "scss" : "./source/css/scss/00_base/",
      "json" : "./source/_patterns/00-global/00-colors/"
    },
    "filenames" : {
      "scss" : "_colors.scss",
      "json" : "colors.json"
    }

Note: If you have multiple levels of variables (for example, $color-text: $color-gray-base), swatches will be generated but they will not have a background color.

Some ideas for handling this:

1. Put those variables in a separate file and don't include them, or write a different mustache file to show them as text without color.
2. Update the regex to delete key/value pairs that don't include hsl, rgb, or #.
3. Do something really fancy to display both the variable name AND the actual color of the design token.
4. Reverse the process - store design tokens in a JSON file and convert them to Sass, instead of the other way around.

I'm also curious how this fits in with Theo...

I don't know how to make this a pattern lab plugin, but I'd be interested in working with someone to do it.

Do you think this would also work with the PHP version of PL?

I ended up switching to the node version and got this working with PLN3. Thanks for this code. I also tried Evan Lovely's version but I couldn't get it to work.

What goes in the 00-colors.json file?