Color data and mustache template to generate a random list of colors. Manually synced (for now) with the project theme's _colors.scss Sass partial. This replaces Pattern Lab's default hard-coded color swatch markup. You still have to maintain the values in 2 files, but a .json file should be easier to deal with.

00-colors.mustache

<ul class="sg-colors">
	{{!
		This will generate a random list of colors,
		reading from the color.listitems.json file.
		Try to keep the json file synced with the
		_colors.scss Sass partial.
	}}
	{{# listItems.nine }} {{! Change the number to match your color quantity }}
	    <li>
			<span class="sg-label">{{ label }}</span>
			<span class="sg-swatch" style="background: {{ hex }};"></span>
			<span class="sg-label">{{ hex }}</span>
	    </li>
	{{/ listItems.nine }} {{! Change it here too }}
</ul>

colors.listitems.json

{
  "1": {
    "label": "Blue",
    "hex": "#8CB7C7"
  },
  "2": {
    "label": "Blue light",
    "hex": "#E2EDF1"
  },
  "3": {
    "label": "Blue dark",
    "hex": "#719BAB"
  },
  "4": {
    "label": "Brown",
    "hex": "#856c42"
  },
  "5": {
    "label": "Brown light",
    "hex": "#B6985E"
  },
  "6": {
    "label": "Brown dark",
    "hex": "#59452A"
  },
  "7": {
    "label": "Gray light",
    "hex": "#f9f9f9"
  },
  "8": {
    "label": "Gray medium",
    "hex": "#7a7a79"
  },
  "9": {
    "label": "Gray dark",
    "hex": "#494949"
  }
}