New: Add CSS custom property template

docs/.vuepress/components/ColorSwatch.vue

@@ -27,6 +27,12 @@
           <code>{{ chromaColor.hex() }}</code>
         </dd>
       </div>
+      <div class="mv2 mh2">
+        <dt class="f7 fw6 lh-copy ttu">CSS</dt>
+        <dd class="f5 ml0">
+          <code>--{{ variablePrefix }}-{{ hue }}-{{ scale }}</code>
+        </dd>
+      </div>
       <div class="mv2 mh2">
         <dt class="f7 fw6 lh-copy ttu">SCSS</dt>
         <dd class="f5 ml0">

lib/index.js

@@ -17,6 +17,9 @@ const SocrativeColors = new ColorBuilder(
   pkg.version
 );
 
+ShowbieColors.build('showbie-color.css', [
+  path.join(__dirname, '..', 'dist', 'showbie-color.css'),
+]);
 ShowbieColors.build('showbie-color.scss', [
   path.join(__dirname, '..', 'dist', 'showbie-color.scss'),
 ]);
@@ -27,6 +30,9 @@ ShowbieColors.build('showbie-color.js', [
   path.join(__dirname, '..', 'dist', 'showbie-color.js'),
 ]);
 
+SocrativeColors.build('showbie-color.css', [
+  path.join(__dirname, '..', 'dist', 'socrative-color.css'),
+]);
 SocrativeColors.build('showbie-color.less', [
   path.join(__dirname, '..', 'dist', 'socrative-color.less'),
 ]);

src/templates/showbie-color.css.hbs

@@ -0,0 +1,14 @@
+/**
+ * BACKPACK COLOURS
+ * v{{version}}
+ */
+
+:root {
+{{#each colors as |hue|}}
+
+  /* {{capitalize hue.name}} */
+{{#each hue.scale as |value label|}}
+  --{{hue.prefix}}-{{hue.name}}-{{label}}: {{value}};
+{{/each}}
+{{/each}}
+}