From e1e1d8f4282d54770603dbe85366df327ce411f3 Mon Sep 17 00:00:00 2001
From: Eli Dupuis <eli@showbie.com>
Date: Wed, 26 Jan 2022 08:16:09 -0800
Subject: [PATCH] New: Add CSS custom property template

---
 .changeset/quick-timers-decide.md                  |  5 +++++
 .../docs/.vuepress/components/ColorSwatch.vue      |  6 ++++++
 packages/backpack-tokens/lib/index.ts              |  6 ++++++
 .../lib/templates/showbie-color.css.hbs            | 14 ++++++++++++++
 4 files changed, 31 insertions(+)
 create mode 100644 .changeset/quick-timers-decide.md
 create mode 100644 packages/backpack-tokens/lib/templates/showbie-color.css.hbs

diff --git a/.changeset/quick-timers-decide.md b/.changeset/quick-timers-decide.md
new file mode 100644
index 00000000..83ee9251
--- /dev/null
+++ b/.changeset/quick-timers-decide.md
@@ -0,0 +1,5 @@
+---
+'@showbie/backpack-tokens': minor
+---
+
+Add CSS custom property template
diff --git a/packages/backpack-tokens/docs/.vuepress/components/ColorSwatch.vue b/packages/backpack-tokens/docs/.vuepress/components/ColorSwatch.vue
index 056f34ca..219de5a2 100644
--- a/packages/backpack-tokens/docs/.vuepress/components/ColorSwatch.vue
+++ b/packages/backpack-tokens/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">
diff --git a/packages/backpack-tokens/lib/index.ts b/packages/backpack-tokens/lib/index.ts
index 8f559f98..fbaa4446 100644
--- a/packages/backpack-tokens/lib/index.ts
+++ b/packages/backpack-tokens/lib/index.ts
@@ -22,6 +22,9 @@ const DocsColors = new ColorDocsBuilder({
   socrative: SOCRATIVE,
 });
 
+ShowbieColors.build('showbie-color.css', [
+  path.join(__dirname, '..', 'dist', 'showbie-color.css'),
+]);
 ShowbieColors.build('showbie-color.scss', [
   path.join(__dirname, '..', 'dist', 'showbie-color.scss'),
 ]);
@@ -32,6 +35,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'),
 ]);
diff --git a/packages/backpack-tokens/lib/templates/showbie-color.css.hbs b/packages/backpack-tokens/lib/templates/showbie-color.css.hbs
new file mode 100644
index 00000000..119fac10
--- /dev/null
+++ b/packages/backpack-tokens/lib/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}}
+}