From e65187feb19b354328990590f5207308e3dd9a28 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 08:32:05 +0000
Subject: [PATCH 01/19] Require 'next' version of Tailwind

---
 package.json |   4 +-
 yarn.lock    | 134 ++++++++++++++++++++++++++++++---------------------
 2 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index be9e621..c9b1727 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "postcss-nested": "^4.1.2",
-    "tailwindcss": "^0.7.3",
+    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next",
     "tailwindcss-spaced-items": "^0.1.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.2"
@@ -41,7 +41,7 @@
   "postcss": {
     "plugins": {
       "postcss-nested": {},
-      "tailwindcss": "./tailwind.js",
+      "tailwindcss": "./tailwind.config.js",
       "autoprefixer": {}
     }
   },
diff --git a/yarn.lock b/yarn.lock
index 108b873..ba1f3ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1296,16 +1296,16 @@ autoprefixer@^8.6.5:
     postcss "^6.0.23"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^9.3.1:
-  version "9.4.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.4.tgz#40c42b335bdb22efe8cd80389ca82ffb5e32d68d"
-  integrity sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==
+autoprefixer@^9.4.5:
+  version "9.4.10"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.10.tgz#e1be61fc728bacac8f4252ed242711ec0dcc6a7b"
+  integrity sha512-XR8XZ09tUrrSzgSlys4+hy5r2/z4Jp7Ag3pHm31U4g/CTccYPOVe19AkaJ4ey/vRd1sfj+5TtuD6I0PXtutjvQ==
   dependencies:
-    browserslist "^4.3.7"
-    caniuse-lite "^1.0.30000926"
+    browserslist "^4.4.2"
+    caniuse-lite "^1.0.30000940"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.7"
+    postcss "^7.0.14"
     postcss-value-parser "^3.3.1"
 
 aws-sign2@~0.7.0:
@@ -1600,7 +1600,7 @@ browserslist@^3.2.8:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
-browserslist@^4.0.0, browserslist@^4.3.4, browserslist@^4.3.7:
+browserslist@^4.0.0, browserslist@^4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.7.tgz#f1de479a6466ea47a0a26dcc725e7504817e624a"
   integrity sha512-pWQv51Ynb0MNk9JGMCZ8VkM785/4MQNXiFYtPqI7EEP0TJO+/d/NqRVn1uiAN0DNbnlUSpL2sh16Kspasv3pUQ==
@@ -1609,6 +1609,15 @@ browserslist@^4.0.0, browserslist@^4.3.4, browserslist@^4.3.7:
     electron-to-chromium "^1.3.96"
     node-releases "^1.1.3"
 
+browserslist@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2"
+  integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg==
+  dependencies:
+    caniuse-lite "^1.0.30000939"
+    electron-to-chromium "^1.3.113"
+    node-releases "^1.1.8"
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -1761,10 +1770,10 @@ camel-case@3.0.x:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camelcase-css@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
-  integrity sha1-FXxCOCZfXPlKHf/ehkRlUsvz9wU=
+camelcase-css@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 camelcase@^4.1.0:
   version "4.1.0"
@@ -1781,11 +1790,16 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864, caniuse-lite@^1.0.30000925, caniuse-lite@^1.0.30000926:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864, caniuse-lite@^1.0.30000925:
   version "1.0.30000927"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000927.tgz#114a9de4ff1e01f5790fe578ecd93421c7524665"
   integrity sha512-ogq4NbUWf1uG/j66k0AmiO3GjqJAlQyF8n4w8a954cbCyFKmYGvRtgz6qkq2fWuduTXHibX7GyYL5Pg58Aks2g==
 
+caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000940:
+  version "1.0.30000943"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000943.tgz#00b25bd5808edc2ed1cfb53533a6a6ff6ca014ee"
+  integrity sha512-nJMjU4UaesbOHTcmz6VS+qaog++Fdepg4KAya5DL/AZrL/aaAZDGOOQ0AECtsJa09r4cJBdHZMive5mw8lnQ5A==
+
 case-sensitive-paths-webpack-plugin@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.2.tgz#c899b52175763689224571dad778742e133f0192"
@@ -2350,11 +2364,6 @@ css-what@2.1, css-what@^2.1.2:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
   integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -2365,6 +2374,11 @@ cssesc@^2.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
   integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.6.tgz#92379e2a6db4a91c0ea727f5f556eeac693eab6a"
@@ -2770,6 +2784,11 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
   integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==
 
+electron-to-chromium@^1.3.113:
+  version "1.3.113"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
+  integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
+
 electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.96:
   version "1.3.98"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.98.tgz#f200bdac84b1110d7d9904f34f4fc6d5573a8a9c"
@@ -3491,15 +3510,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -5164,6 +5174,13 @@ node-releases@^1.1.3:
   dependencies:
     semver "^5.3.0"
 
+node-releases@^1.1.8:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.10.tgz#5dbeb6bc7f4e9c85b899e2e7adcc0635c9b2adf7"
+  integrity sha512-KbUPCpfoBvb3oBkej9+nrU0/7xPlVhmhhUJ1PZqwIP5/1dJkRWKWD3OONjo6M2J7tSCBtDCumLwwqeI+DWWaLQ==
+  dependencies:
+    semver "^5.3.0"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -5204,6 +5221,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
@@ -5758,13 +5780,13 @@ postcss-functions@^3.0.0:
     postcss "^6.0.9"
     postcss-value-parser "^3.3.0"
 
-postcss-js@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.1.tgz#ffaf29226e399ea74b5dce02cab1729d7addbc7b"
-  integrity sha512-smhUUMF5o5W1ZCQSyh5A3lNOXFLdNrxqyhWbLsGolZH2AgVmlyhxhYbIixfsdKE6r1vG5i7O40DPcvEvE1mvjw==
+postcss-js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.0.tgz#f75b70470009eb37f998ee9bb516a2899c19ef8d"
+  integrity sha512-9kAApW9G5kN8FkQ0ZdvSmbgbHIRrKmXtde2ZWYbwrW51gfEWfGsLlUu57mTpioPrmQlQFOgEvaeGYp+poqlX0A==
   dependencies:
-    camelcase-css "^1.0.1"
-    postcss "^6.0.11"
+    camelcase-css "^2.0.0"
+    postcss "^7.0.0"
 
 postcss-load-config@^2.0.0:
   version "2.0.0"
@@ -5877,15 +5899,7 @@ postcss-modules-values@^1.3.0:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
-postcss-nested@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-3.0.0.tgz#cde40bd07a078565f3df72e2dc2665871c724852"
-  integrity sha512-1xxmLHSfubuUi6xZZ0zLsNoiKfk3BWQj6fkNMaBJC529wKKLcdeCxXt6KJmDLva+trNyQNwEaE/ZWMA7cve1fA==
-  dependencies:
-    postcss "^6.0.14"
-    postcss-selector-parser "^3.1.1"
-
-postcss-nested@^4.1.2:
+postcss-nested@^4.1.1, postcss-nested@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.1.2.tgz#8e0570f736bfb4be5136e31901bf2380b819a561"
   integrity sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==
@@ -6010,7 +6024,7 @@ postcss-scss@^0.3.0:
   dependencies:
     postcss "^5.2.4"
 
-postcss-selector-parser@^3.0.0, postcss-selector-parser@^3.1.1:
+postcss-selector-parser@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
   integrity sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=
@@ -6028,6 +6042,15 @@ postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-svgo@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.1.tgz#5628cdb38f015de6b588ce6d0bf0724b492b581d"
@@ -6062,7 +6085,7 @@ postcss@^5.0.8, postcss@^5.2.4:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.14, postcss@^6.0.23, postcss@^6.0.9:
+postcss@^6.0.1, postcss@^6.0.23, postcss@^6.0.9:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -6080,7 +6103,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.5, postcss@^7.0.7:
     source-map "^0.6.1"
     supports-color "^5.5.0"
 
-postcss@^7.0.14:
+postcss@^7.0.11, postcss@^7.0.14:
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
   integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
@@ -7277,24 +7300,23 @@ tailwindcss-visuallyhidden@^1.0.1:
   resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"
   integrity sha512-RJNJ2BqUBPw8OgPR/UnoLFNuKuFWEM5gk6tcg63atG5rUS5tTtxHjsay0b8JnIx+0xfFF72dRuoDmVvxn4HDrg==
 
-tailwindcss@^0.7.3:
+"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next":
   version "0.7.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.3.tgz#7b58605dd7857507c4dbc6edaccab4c14d30c054"
-  integrity sha512-YbIa8lrngcObqaJEjza8/jwmx3F6L0TQ3vWTf6KD/EHWjRTVlcExDhtWbTwEUnX0fxuK5UvfSl2gfW0mP3Skzg==
+  resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a"
   dependencies:
-    autoprefixer "^9.3.1"
+    autoprefixer "^9.4.5"
     bytes "^3.0.0"
     chalk "^2.4.1"
-    css.escape "^1.5.1"
-    fs-extra "^4.0.2"
-    lodash "^4.17.5"
+    fs-extra "^7.0.1"
+    lodash "^4.17.11"
     node-emoji "^1.8.1"
+    normalize.css "^8.0.1"
     perfectionist "^2.4.0"
-    postcss "^6.0.9"
+    postcss "^7.0.11"
     postcss-functions "^3.0.0"
-    postcss-js "^1.0.1"
-    postcss-nested "^3.0.0"
-    postcss-selector-parser "^3.1.1"
+    postcss-js "^2.0.0"
+    postcss-nested "^4.1.1"
+    postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
     strip-comments "^1.0.2"
 

From 3cefd0bbe5532b3f0313d2107fe37ad9470afc0c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 08:32:59 +0000
Subject: [PATCH 02/19] Change preflight to base

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index c477c19..181ce75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
 </template>
 
 <style lang="postcss">
-@tailwind preflight;
+@tailwind base;
 @tailwind components;
 
 .btn {

From 85224ef90cb10839c55e3a16cd467bf9543ddd7d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 08:35:27 +0000
Subject: [PATCH 03/19] Update Tailwind config

---
 tailwind.config.js | 59 +++++++++++++++++++++++++++++++++
 tailwind.js        | 82 ----------------------------------------------
 2 files changed, 59 insertions(+), 82 deletions(-)
 create mode 100644 tailwind.config.js
 delete mode 100644 tailwind.js

diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..b6b7300
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,59 @@
+defaultTheme = require('tailwindcss/defaultTheme')()
+
+module.exports = {
+  theme: {
+    colors: {
+     'inherit': 'inherit',
+      'black': '#22292f',
+      'blue': '#018dc7',
+      'blue-dark': '#0e68a7',
+      'blue-darker': '#004f86',
+      'blue-light': '#29aae1',
+      'green': '#398002',
+      'grey': '#B7B7B7',
+      'grey-dark': '#888888',
+      'grey-darker': '#555555',
+      'grey-darkest': '#333333',
+      'grey-light': '#DDDDDD',
+      'grey-lighter': '#eeeeee',
+      'grey-lightest': '#f8fafc',
+      'orange': '#FA9903',
+      'orange-light': '#FFB401',
+      'purple': '#991FAF',
+      'red-dark': '#cc1f1a',
+      'teal': '#3F7B8F',
+      'transparent': 'transparent',
+      'white': '#ffffff',
+      'yellow-lightest': '#FAF8DF'
+    },
+    extend: {
+      borderWidth: {
+        '3': '3px',
+        '6': '6px',
+        '10': '10px',
+      },
+      boxShadow: {
+        md: '0 0 10px 0 rgba(0,0,0,0.1)',
+      },
+      fontFamily: {
+        'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        '2xs': '.625rem', // 10px
+      },
+      spacing: {
+        '48': '10rem',
+        '56': '14rem',
+        '64': '16rem',
+      },
+      width: {
+        '56': '14rem',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss/plugins/container')(),
+    require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),
+    require('tailwindcss-visuallyhidden')(),
+  ],
+}
diff --git a/tailwind.js b/tailwind.js
deleted file mode 100644
index 6d2d1b6..0000000
--- a/tailwind.js
+++ /dev/null
@@ -1,82 +0,0 @@
-let defaultConfig = require('tailwindcss/defaultConfig')()
-
-var colors = {
-  ...defaultConfig.colors,
-  'inherit': 'inherit',
-  'black': '#22292f',
-  'blue': '#018dc7',
-  'blue-dark': '#0e68a7',
-  'blue-darker': '#004f86',
-  'blue-light': '#29aae1',
-  'green': '#398002',
-  'grey': '#B7B7B7',
-  'grey-dark': '#888888',
-  'grey-darker': '#555555',
-  'grey-darkest': '#333333',
-  'grey-light': '#DDDDDD',
-  'grey-lighter': '#eeeeee',
-  'grey-lightest': '#f8fafc',
-  'orange': '#FA9903',
-  'orange-light': '#FFB401',
-  'purple': '#991FAF',
-  'red-dark': '#cc1f1a',
-  'teal': '#3F7B8F',
-  'transparent': 'transparent',
-  'white': '#ffffff',
-  'yellow-lightest': '#FAF8DF'
-}
-
-module.exports = {
-  ...defaultConfig,
-  colors: colors,
-  textColors: colors,
-  backgroundColors: colors,
-  borderColors: Object.assign({ default: colors['grey-light'] }, colors),
-  fonts: {
-    ...defaultConfig.fonts,
-    'sans': [
-      'Proxima Nova',
-      'system-ui',
-      'BlinkMacSystemFont',
-      '-apple-system',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      'sans-serif',
-    ],
-  },
-  textSizes: {
-    ...defaultConfig.textSizes,
-    '2xs': '.625rem', // 10px
-  },
-  borderWidths: {
-    ...defaultConfig.borderWidths,
-    '3': '3px',
-    '6': '6px',
-    '10': '10px',
-  },
-  margin: {
-    ...defaultConfig.margin,
-    '48': '10rem',
-    '56': '14rem',
-    '64': '16rem',
-  },
-  width: {
-    ...defaultConfig.width,
-    '56': '14rem',
-  },
-  shadows: {
-    ...defaultConfig.shadows,
-    'md': '0 0 10px 0 rgba(0,0,0,0.1)'
-  },
-  plugins: [
-    require('tailwindcss/plugins/container')(),
-    require('tailwindcss-spaced-items')(),
-    require('tailwindcss-visuallyhidden')(),
-  ],
-}

From b02b6613827e54cf4e7c0df0c6df2e23159935cb Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 08:35:40 +0000
Subject: [PATCH 04/19] Re-add base heading styles

---
 src/App.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 181ce75..530d548 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,15 @@
 @tailwind base;
 @tailwind components;
 
+h1,
+h2 {
+  @apply font-bold
+}
+
+h2 {
+  @apply text-2xl
+}
+
 .btn {
   @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-dark;
 

From 989085fac4f2d08f59f1308bcc5ea2925105632a Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 08:55:09 +0000
Subject: [PATCH 05/19] Change to numeric scales for colours

---
 tailwind.config.js | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index b6b7300..82cc229 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,28 +3,34 @@ defaultTheme = require('tailwindcss/defaultTheme')()
 module.exports = {
   theme: {
     colors: {
-     'inherit': 'inherit',
+      'inherit': 'inherit',
       'black': '#22292f',
-      'blue': '#018dc7',
-      'blue-dark': '#0e68a7',
-      'blue-darker': '#004f86',
-      'blue-light': '#29aae1',
+      'blue': {
+        '1': '#29aae1',
+        '2': '#018dc7',
+        '3': '#0e68a7',
+        '4': '#004f86',
+      },
       'green': '#398002',
-      'grey': '#B7B7B7',
-      'grey-dark': '#888888',
-      'grey-darker': '#555555',
-      'grey-darkest': '#333333',
-      'grey-light': '#DDDDDD',
-      'grey-lighter': '#eeeeee',
-      'grey-lightest': '#f8fafc',
-      'orange': '#FA9903',
-      'orange-light': '#FFB401',
-      'purple': '#991FAF',
-      'red-dark': '#cc1f1a',
-      'teal': '#3F7B8F',
+      'grey': {
+        '1': '#f8fafc',
+        '2': '#eee',
+        '3': '#ddd',
+        '4': '#b7b7b7',
+        '5': '#888',
+        '6': '#555',
+        '7': '#333',
+      },
+      'orange': {
+        '1': '#fa9903',
+        '2': '#ffb401',
+      },
+      'purple': '#991faf',
+      'red': '#cc1f1a',
+      'teal': '#3f7b8f',
       'transparent': 'transparent',
-      'white': '#ffffff',
-      'yellow-lightest': '#FAF8DF'
+      'white': '#fff',
+      'yellow': '#faf8df'
     },
     extend: {
       borderWidth: {

From fc042670743e9dcb3161423d8a317b9ec44ce471 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 09:04:53 +0000
Subject: [PATCH 06/19] Update colours in markup

---
 public/index.html                             |  2 +-
 src/App.vue                                   | 12 ++--
 .../Application/ApplicationCard.vue           | 12 ++--
 .../ApplicationDisplaySwitcher.vue            |  6 +-
 src/components/Application/StarToggle.vue     |  2 +-
 src/components/Environment/ActionCards.vue    | 58 +++++++++----------
 .../Environment/EnvironmentCards.vue          | 18 +++---
 src/components/Environment/QuickHelp.vue      |  8 +--
 .../Environment/TaskLog/TaskLog.vue           |  2 +-
 .../Environment/TaskLog/TaskLogItem.vue       | 10 ++--
 src/components/Environment/ToggleHelp.vue     |  2 +-
 src/components/HeaderButtons.vue              |  2 +-
 src/components/Navbar.vue                     | 10 ++--
 src/components/Sidebar.vue                    | 10 ++--
 src/components/TitleBlock.vue                 |  4 +-
 src/views/Applications.vue                    |  2 +-
 src/views/Environment.vue                     | 30 +++++-----
 src/views/Environments.vue                    |  6 +-
 18 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/public/index.html b/public/index.html
index 18101a5..db7b8f7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Rebuilding Acquia</title>
   </head>
-  <body class="antialiased bg-grey-lighter font-sans min-h-full flex flex-col flex-1">
+  <body class="antialiased bg-grey-2 font-sans min-h-full flex flex-col flex-1">
     <noscript>
       <strong>We're sorry but rebuilding-acquia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/App.vue b/src/App.vue
index 530d548..361232b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,29 +18,29 @@ h2 {
 }
 
 .btn {
-  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-dark;
+  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-3;
 
   &:hover,
   &:focus {
-    @apply bg-blue-darker
+    @apply bg-blue-4
   }
 }
 
 .btn.is-secondary {
-  @apply bg-grey-dark;
+  @apply bg-grey-5;
 
   &:hover,
   &:focus {
-    @apply bg-grey-darker
+    @apply bg-grey-6
   }
 }
 
 .tag {
-  @apply text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2 mb-2
+  @apply text-2xs uppercase py-1 px-2 rounded border border-grey-4 bg-white mr-2 mb-2
 }
 
 .tag.is-type {
-  @apply bg-blue-light border-blue-light text-white
+  @apply bg-blue-1 border-blue-1 text-white
 }
 
 @tailwind utilities;
diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index 510c1b7..8e5e41b 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div v-if="display == 'grid'" class="bg-white p-4 border-grey rounded border flex-1">
+    <div v-if="display == 'grid'" class="bg-white p-4 border-grey-4 rounded border flex-1">
       <div class="flex h-full">
         <div class="flex-1 w-5/6 flex flex-col justify-between">
           <div>
             <div>
-              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-dark no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link>
+              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link>
             </div>
 
-            <div class="truncate text-blue-dark">
+            <div class="truncate text-blue-3">
               <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a>
             </div>
           </div>
@@ -22,18 +22,18 @@
       </div>
     </div>
 
-    <div v-if="display == 'list'" class="bg-white p-3 border-grey border-b">
+    <div v-if="display == 'list'" class="bg-white p-3 border-grey-4 border-b">
       <div class="-mx-2">
         <div class="flex flex-row-reverse items-center justify-between">
           <div class="flex flex-1 justify-between items-center -mx-2">
             <div class="flex-1 px-2">
-              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-dark no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
+              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
             </div>
 
             <application-tags :type="application.type" :level="application.level" class="w-1/4 px-2"></application-tags>
 
             <div class="w-2/5 px-2">
-              <a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
+              <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
             </div>
           </div>
 
diff --git a/src/components/Application/ApplicationDisplaySwitcher.vue b/src/components/Application/ApplicationDisplaySwitcher.vue
index 7a0aecc..072a7d1 100644
--- a/src/components/Application/ApplicationDisplaySwitcher.vue
+++ b/src/components/Application/ApplicationDisplaySwitcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="bg-grey-lightest rounded overflow-hidden">
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-dark focus:text-white" :class="[mode == 'grid' ? 'bg-blue-light text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
+    <div class="bg-grey-1 rounded overflow-hidden">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__grid"></use></svg>
         <span class="visuallyhidden">Grid</span>
       </button>
 
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-dark focus:text-white" :class="[mode == 'list' ? 'bg-blue-light text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'list' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__list"></use></svg>
         <span class="visuallyhidden">List</span>
       </button>
diff --git a/src/components/Application/StarToggle.vue b/src/components/Application/StarToggle.vue
index 2eff39f..4be8a42 100644
--- a/src/components/Application/StarToggle.vue
+++ b/src/components/Application/StarToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
+  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-1 hover:text-orange-2 focus:text-orange-2' : 'text-grey-4 focus:text-orange-2 hover:text-orange-1']">
     <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
     <svg class="h-6 w-6 fill-current -mr-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
   </button>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 99b94e6..1a72704 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'code'">Code</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'databases'">Databases</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-darker' : 'bg-blue-dark']" @click="active = 'files'">Files</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'code'">Code</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'databases'">Databases</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'files'">Files</button></li>
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
-        <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey">
+            <div class="border-b border-grey-4">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-darker text-base mb-1">Code</h2>
-                    <div class="text-xs text-grey-darker">{{ environment.name }}: {{ environment.label }}</div>
+                    <h2 class="text-grey-6 text-base mb-1">Code</h2>
+                    <div class="text-xs text-grey-6">{{ environment.name }}: {{ environment.label }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -27,15 +27,15 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
-                  <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
                     <span class="block">Deploy</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
-                  <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
                     <span class="block">Switch</span>
                   </button>
@@ -47,14 +47,14 @@
       </div>
 
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
-        <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey">
+            <div class="border-b border-grey-4">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-darker text-base mb-1">Databases</h2>
-                    <div class="text-xs text-grey-darker">{{ environment.name }}</div>
+                    <h2 class="text-grey-6 text-base mb-1">Databases</h2>
+                    <div class="text-xs text-grey-6">{{ environment.name }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -66,27 +66,27 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
-                  <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
-                  <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
                     <span class="block">Back up</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
                   <button
                     type="button"
-                    class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"
+                    class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block"
                     :class="{
-                      'text-blue-dark': !isProduction,
-                      'text-grey-dark cursor-not-allowed': isProduction
+                      'text-blue-3': !isProduction,
+                      'text-grey-5 cursor-not-allowed': isProduction
                     }"
                     :disabled="isProduction"
                   >
@@ -101,14 +101,14 @@
       </div>
 
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
-        <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey">
+            <div class="border-b border-grey-4">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-darker text-base mb-1">Files</h2>
-                    <div class="text-xs text-grey-darker">{{ environment.name }}</div>
+                    <h2 class="text-grey-6 text-base mb-1">Files</h2>
+                    <div class="text-xs text-grey-6">{{ environment.name }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -120,8 +120,8 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey">
-                  <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index 4c956a2..80a0328 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -2,42 +2,42 @@
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
       <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
-        <div class="border border-grey rounded overflow-hidden">
+        <div class="border border-grey-4 rounded overflow-hidden">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-3">
-              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-darker hover:text-blue-dark focus:text-blue-dark focus:outline-none mb-1">
+              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none mb-1">
                 <h2>{{ environment.name }}</h2>
                 <svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </router-link>
 
               <div class="mb-2">
-                <a href="#0" class="no-underline hover:underline focus:underline text-grey-darker hover:text-blue-dark focus:text-blue-dark focus:outline-none">
+                <a href="#0" class="no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none">
                   {{ environment.url }}
                 </a>
               </div>
 
-              <div class="text-grey-darker">{{ environment.label }}</div>
+              <div class="text-grey-6">{{ environment.label }}</div>
             </div>
           </div>
 
           <div>
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline text-sm w-full text-left">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Code</span>
-              <span class="border-l border-grey p-2">
+              <span class="border-l border-grey-4 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline text-sm w-full text-left border-t border-grey">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left border-t border-grey-4">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Databases</span>
-              <span class="border-l border-grey p-2">
+              <span class="border-l border-grey-4 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center text-white bg-blue hover:bg-blue-darker focus:bg-blue-darker focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey">
+            <button type="button" class="flex items-center text-white bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey-4">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               Files
             </button>
diff --git a/src/components/Environment/QuickHelp.vue b/src/components/Environment/QuickHelp.vue
index 21dc9f6..90f3e2b 100644
--- a/src/components/Environment/QuickHelp.vue
+++ b/src/components/Environment/QuickHelp.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
-    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-lighter">
+    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-2">
       <div class="flex items-center">
         <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
         Quick help
@@ -22,15 +22,15 @@
             :key="item.subject"
             type="button"
             class="hover:underline focus:underline mr-6 focus:outline-none"
-            :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-dark' ]"
+            :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-3' ]"
             @click="selected = i"
           >{{ item.subject }}</button>
         </div>
 
         <div class="leading-normal">
-          <p class="text-sm text-grey-darker">
+          <p class="text-sm text-grey-6">
             {{ items[selected].text }}
-            <a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">Learn more</a>
+            <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">Learn more</a>
           </p>
         </div>
       </div>
diff --git a/src/components/Environment/TaskLog/TaskLog.vue b/src/components/Environment/TaskLog/TaskLog.vue
index 711a61c..20551e0 100644
--- a/src/components/Environment/TaskLog/TaskLog.vue
+++ b/src/components/Environment/TaskLog/TaskLog.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-grey-light pb-4 pt-6 px-4">
+    <div class="bg-grey-3 pb-4 pt-6 px-4">
       <h2 class="font-normal text-lg">Task Log</h2>
     </div>
     <div>
diff --git a/src/components/Environment/TaskLog/TaskLogItem.vue b/src/components/Environment/TaskLog/TaskLogItem.vue
index ec7118a..e2a4d31 100644
--- a/src/components/Environment/TaskLog/TaskLogItem.vue
+++ b/src/components/Environment/TaskLog/TaskLogItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="px-3 py-4 border-b border-grey-light flex" :class="{'bg-yellow-lightest': open}">
+    <div class="px-3 py-4 border-b border-grey-3 flex" :class="{'bg-yellow-lightest': open}">
       <div class="flex-none mr-3">
         <svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
         <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
@@ -9,18 +9,18 @@
 
       <div class="flex-1">
         <div class="text-sm font-bold mb-2">{{ task.text }}</div>
-        <div class="text-grey-darker text-2xs">{{ task.times.display }}</div>
+        <div class="text-grey-6 text-2xs">{{ task.times.display }}</div>
       </div>
 
       <div>
         <button type="button" @click="open = !open">
-          <svg v-if="!open" class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
-          <svg v-else class="h-5 w-5 text-grey-darker fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-if="!open" class="h-5 w-5 text-grey-6 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-else class="h-5 w-5 text-grey-6 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
         </button>
       </div>
     </div>
 
-    <div class="p-4 bg-grey-darker text-white antialiased" v-show="open">
+    <div class="p-4 bg-grey-6 text-white antialiased" v-show="open">
       <div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
         <div class="px-4 mb-4">
           <div class="text-xs uppercase mb-1">Task ID</div>
diff --git a/src/components/Environment/ToggleHelp.vue b/src/components/Environment/ToggleHelp.vue
index 3b928a2..c01cc82 100644
--- a/src/components/Environment/ToggleHelp.vue
+++ b/src/components/Environment/ToggleHelp.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="hidden lg:block">
     <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
-      <svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
+      <svg class="h-5 w-5 mr-1 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
       {{ hidden ? 'Show quick help' : 'Hide quick help' }}
     </button>
   </div>
diff --git a/src/components/HeaderButtons.vue b/src/components/HeaderButtons.vue
index 86523d3..6709978 100644
--- a/src/components/HeaderButtons.vue
+++ b/src/components/HeaderButtons.vue
@@ -7,7 +7,7 @@
           class="text-xs no-underline hover:underline flex flex-col items-center justify-center"
           :class="{
             'text-grey cursor-not-allowed': link.disabled,
-            'text-blue-dark': !link.disabled,
+            'text-blue-3': !link.disabled,
           }"
           :disabled="link.disabled"
         >
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e8dfff1..43c145c 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -7,20 +7,20 @@
 
         <div class="flex flex-col flex-1">
           <nav class="border-t-2 border-transparent flex justify-end md:justify-start">
-            <a href="#0" class="inline-block text-sm border-b-4 border-blue-dark mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Develop</a>
-            <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Manage</a>
+            <a href="#0" class="inline-block text-sm border-b-4 border-blue-3 mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Develop</a>
+            <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Manage</a>
           </nav>
         </div>
 
         <div class="hidden md:flex md:items-center">
-          <div><a class="text-sm text-blue-dark no-underline hover:underline uppercase" href="#0">Help</a></div>
+          <div><a class="text-sm text-blue-3 no-underline hover:underline uppercase" href="#0">Help</a></div>
           <div class="ml-6"><button type="button">
             <span class="hidden">Menu</span>
-            <svg class="fill-current text-blue-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg>
+            <svg class="fill-current text-blue-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg>
           </button></div>
           <div class="ml-6"><button type="button">
             <span class="hidden">Activity</span>
-            <svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg>
+            <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg>
           </button></div>
           <div class="ml-6">
             <img class="w-5 h-5 rounded-full" src="https://avatars1.githubusercontent.com/u/339813?s=460&v=4" alt="">
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 08ea469..b1f815f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto lg:w-56 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll">
+  <div class="w-auto lg:w-56 bg-grey-3 text-grey-6 antialiased fixed pin-l h-full overflow-y-scroll">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">
@@ -7,10 +7,10 @@
             href="#0"
             class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
             :class="{
-              'bg-grey-darker text-white': link.active,
-              'border-transparent hover:bg-grey hover:text-blue-dark': !link.active,
-              'text-grey-dark cursor-not-allowed': link.disabled,
-              'text-grey-darker': !link.disabled,
+              'bg-grey-6 text-white': link.active,
+              'border-transparent hover:bg-grey hover:text-blue-3': !link.active,
+              'text-grey-5 cursor-not-allowed': link.disabled,
+              'text-grey-6': !link.disabled,
             }"
           >
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
diff --git a/src/components/TitleBlock.vue b/src/components/TitleBlock.vue
index 94b9e64..c89e572 100644
--- a/src/components/TitleBlock.vue
+++ b/src/components/TitleBlock.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="border-b-3 border-grey-light">
-    <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-lighter flex justify-between items-center">
+  <div class="border-b-3 border-grey-3">
+    <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-2 flex justify-between items-center">
       <div class="w-full md:w-auto flex flex-col">
         <slot name="left"></slot>
       </div>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 94470e3..160489f 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -31,7 +31,7 @@
                 <div class="w-full">
                   <form action="#">
                     <label for="applications" class="visuallyhidden">Filter applications</label>
-                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-darker rounded">
+                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-4-6 rounded">
                   </form>
                 </div>
               </div>
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index 0030861..d4c71b2 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -8,11 +8,11 @@
           <div class="text-xs mb-3">
             <ol class="list-reset flex">
               <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-dark no-underline hover:underline mr-1">Applications</router-link>
+                <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li class="flex items-center pr-1">
-                <router-link :to="{ name: 'environments' }" class="text-blue-dark no-underline hover:underline mr-1">{{ application.name }}</router-link>
+                <router-link :to="{ name: 'environments' }" class="text-blue-3 no-underline hover:underline mr-1">{{ application.name }}</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li>{{ environment.name }}</li>
@@ -21,7 +21,7 @@
 
           <button class="flex flex-1 items-center justify-between md:justify-start">
             <div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div>
-            <svg class="h-6 w-6 text-blue-dark fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
+            <svg class="h-6 w-6 text-blue-3 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
           </button>
         </template>
 
@@ -48,7 +48,7 @@
             </div>
 
             <div class="my-10">
-              <a :href="environment.url" class="flex items-center text-sm text-blue-dark no-underline hover:underline focus:underline">
+              <a :href="environment.url" class="flex items-center text-sm text-blue-3 no-underline hover:underline focus:underline">
                 <svg class="h-6 w-6 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__globe"></use></svg>
                 {{ environment.url }}
               </a>
@@ -60,14 +60,14 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Site Health</h2></div>
+                <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Site Health</h2></div>
                 <div class="bg-white p-4">
                   <div class="mb-6">
                     <p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
                   </div>
 
                   <div class="text-center leading-normal mb-5">
-                    <p class="text-grey-darker">
+                    <p class="text-grey-6">
                       Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
                       of whether your Drupal site is really up and running.
                     </p>
@@ -81,13 +81,13 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Information</h2></div>
+                <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Information</h2></div>
                 <div class="bg-white px-4 py-6">
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">Git URL</div>
-                    <div class="border border-grey-dark rounded p-3">{{ gitUrl }}</div>
+                    <div class="border border-grey-4-5 rounded p-3">{{ gitUrl }}</div>
                     <div class="absolute pin-t pin-r">
-                      <button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
+                      <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">Git URL to your clipboard</span>
                       </button>
@@ -96,9 +96,9 @@
 
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">SSH URL</div>
-                    <div class="border border-grey-dark rounded p-3">{{ sshUrl }}</div>
+                    <div class="border border-grey-4-5 rounded p-3">{{ sshUrl }}</div>
                     <div class="absolute pin-t pin-r">
-                      <button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
+                      <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
                       </button>
@@ -107,22 +107,22 @@
 
                   <div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-darker">IP Address</div>
+                      <div class="mb-1 text-xs text-grey-6">IP Address</div>
                       <div>1.2.3.4</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-darker">Region</div>
+                      <div class="mb-1 text-xs text-grey-6">Region</div>
                       <div>eu-west-1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-darker">PHP version</div>
+                      <div class="mb-1 text-xs text-grey-6">PHP version</div>
                       <div>7.1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-darker">Live development mode</div>
+                      <div class="mb-1 text-xs text-grey-6">Live development mode</div>
                       <div>Off</div>
                     </div>
                   </div>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index facbcb0..edb9d0e 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -8,7 +8,7 @@
           <div class="text-xs mb-3">
             <ol class="list-reset flex">
               <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-dark no-underline hover:underline mr-1">Applications</router-link>
+                <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li>{{ application.name }}</li>
@@ -17,7 +17,7 @@
 
           <button class="flex flex-1 items-center justify-between md:justify-start">
             <div class="text-2xl font-hairline mr-2">{{ application.name }}</div>
-            <svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
+            <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
           </button>
         </template>
 
@@ -46,7 +46,7 @@
               <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">
                 <div class="w-full lg:w-1/2 xl:w-1/3">
                   <form action="#">
-                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-darker rounded">
+                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-4-6 rounded">
                   </form>
                 </div>
 

From bbbcd7775716cf19325b3520c922bac7898f9dba Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 10 Mar 2019 22:39:10 +0000
Subject: [PATCH 07/19] Remove quotes

---
 tailwind.config.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 82cc229..b8cbefa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,16 +3,16 @@ defaultTheme = require('tailwindcss/defaultTheme')()
 module.exports = {
   theme: {
     colors: {
-      'inherit': 'inherit',
-      'black': '#22292f',
-      'blue': {
+      inherit: 'inherit',
+      black: '#22292f',
+      blue: {
         '1': '#29aae1',
         '2': '#018dc7',
         '3': '#0e68a7',
         '4': '#004f86',
       },
-      'green': '#398002',
-      'grey': {
+      green: '#398002',
+      grey: {
         '1': '#f8fafc',
         '2': '#eee',
         '3': '#ddd',
@@ -21,16 +21,16 @@ module.exports = {
         '6': '#555',
         '7': '#333',
       },
-      'orange': {
+      orange: {
         '1': '#fa9903',
         '2': '#ffb401',
       },
-      'purple': '#991faf',
-      'red': '#cc1f1a',
-      'teal': '#3f7b8f',
-      'transparent': 'transparent',
-      'white': '#fff',
-      'yellow': '#faf8df'
+      purple: '#991faf',
+      red: '#cc1f1a',
+      teal: '#3f7b8f',
+      transparent: 'transparent',
+      white: '#fff',
+      yellow: '#faf8df'
     },
     extend: {
       borderWidth: {
@@ -42,7 +42,7 @@ module.exports = {
         md: '0 0 10px 0 rgba(0,0,0,0.1)',
       },
       fontFamily: {
-        'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans],
+        sans: ['Proxima Nova', ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
         '2xs': '.625rem', // 10px

From aa442681815f6496e08ee8cc7b2595b5f1d4685d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 11 Mar 2019 23:18:10 +0000
Subject: [PATCH 08/19] Only load task log if there are tasks

---
 src/views/Environments.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index edb9d0e..3d70576 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -59,7 +59,7 @@
 
           <quick-help :hidden="help.hidden"></quick-help>
           <environment-cards :environments="application.environments" :id="id"></environment-cards>
-          <task-log :tasks="application.tasks"></task-log>
+          <task-log :tasks="application.tasks" v-if="application.tasks[0]"></task-log>
         </div>
 
         <sidebar :links="[

From a0526fc481efd93cbc915004f8f43d5d1b37903c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 12 Mar 2019 00:08:14 +0000
Subject: [PATCH 09/19] Convert data.json to JS

---
 src/data.js                | 217 +++++++++++++++++++++++++++++++++++++
 src/data.json              | 217 -------------------------------------
 src/views/Applications.vue |   2 +-
 src/views/Environment.vue  |   2 +-
 src/views/Environments.vue |   2 +-
 5 files changed, 220 insertions(+), 220 deletions(-)
 create mode 100644 src/data.js
 delete mode 100644 src/data.json

diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..54fa220
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,217 @@
+export default {
+  applications: {
+    1: {
+      id: 1,
+      name: 'Rebuilding Acquia',
+      machineName: 'rebuildingacquia',
+      type: 'Drupal',
+      level: 'Enterprise',
+      environments: {
+        dev: {
+          name: 'Dev',
+          url: 'dev.rebuilding-acquia.com',
+          label: 'develop',
+        },
+        stage: {
+          name: 'stage',
+          url: 'stg.rebuilding-acquia.com',
+          label: 'master',
+        },
+        prod: {
+          name: 'prod',
+          url: 'rebuilding-acquia.com',
+          label: 'tags/2018-12-21',
+        },
+        ra: {
+          name: 'RA',
+          url: 'ra.rebuilding-acquia.com',
+          label: 'tags/WELCOME',
+        },
+      },
+      tasks: [
+        {
+          text: 'Commit: fdac923 Merge branch \'update-password-policy\' refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 19, 2018 3:48:29 PM UTC +0000',
+            started: 'Dec 19, 2018 3:48:29 PM UTC +0000',
+            completed: 'Dec 19, 2018 3:48:29 PM UTC +0000'
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: 9688c41 Update IP address refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 19, 2018 3:50:31 PM UTC +0000',
+            started: 'Dec 19, 2018 3:50:31 PM UTC +0000',
+            completed: 'Dec 19, 2018 3:50:31 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Deploy code from test to prod',
+          user: 'system',
+          times: {
+            display: 'Dec 19, 2018 3:55:29 PM UTC +0000',
+            started: 'Dec 19, 2018 3:55:29 PM UTC +0000',
+            completed: 'Dec 19, 2018 3:55:29 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Deploy the code reference master to dev',
+          user: 'system',
+          times: {
+            display: 'Dec 20, 2018 10:13:48 PM UTC +0000',
+            started: 'Dec 20, 2018 10:13:48 PM UTC +0000',
+            completed: 'Dec 20, 2018 10:13:48 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Deploy the code reference tags/2018-12-19 to test',
+          user: 'system',
+          times: {
+            display: 'Dec 20, 2018 10:25:07 PM UTC +0000',
+            started: 'Dec 20, 2018 10:25:07 PM UTC +0000',
+            completed: 'Dec 20, 2018 10:25:07 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: e75c4a3 Merge branch \'voucher-code-bug-34\' refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 21, 2018 12:55:49 PM UTC +0000',
+            started: 'Dec 21, 2018 12:55:49 PM UTC +0000',
+            completed: 'Dec 21, 2018 12:55:49 PM UTC +0000',
+          },
+          "status": "Failed",
+          loading: false,
+          "success": false
+        },
+        {
+          text: 'Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 21, 2018 1:09:19 PM UTC +0000',
+            started: 'Dec 21, 2018 1:09:19 PM UTC +0000',
+            completed: 'Dec 21, 2018 1:09:19 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: 96ac151 Fix syntax refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 21, 2018 1:23:43 PM UTC +0000',
+            started: 'Dec 21, 2018 1:23:43 PM UTC +0000',
+            completed: 'Dec 21, 2018 1:23:43 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: 8056d51 Add production URLs as settings refs/heads/master',
+          user: 'system',
+          times: {
+            display: 'Dec 21, 2018 1:34:13 PM UTC +0000',
+            started: 'Dec 21, 2018 1:34:13 PM UTC +0000',
+            completed: 'Dec 21, 2018 1:34:13 PM UTC +0000',
+          },
+          "status": "In progress",
+          "loading": true,
+          success: true,
+        },
+      ],
+    },
+    2: {
+      id: 2,
+      name: 'Oliver Davies',
+      machineName: 'oliverdavies',
+      type: 'Drupal',
+      level: 'Professional',
+      environments: {
+        dev: {
+          name: 'Dev',
+          url: 'dev.oliverdavies.uk',
+          label: 'develop',
+        },
+        stage: {
+          name: 'stage',
+          url: 'stg.oliverdavies.uk',
+          label: 'master',
+        },
+        prod: {
+          name: 'prod',
+          url: 'oliverdavies.uk',
+          label: 'tags/2018-12-21',
+        },
+      },
+      tasks: [
+        {
+          text: 'Create database opdaviestest in Dev.',
+          user: 'system',
+          times: {
+            display: 'Dec 23, 2018 11:26:48 PM UTC +0000',
+            started: 'Dec 23, 2018 11:26:50 PM UTC +0000',
+            completed: 'Dec 23, 2018 11:26:52 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Create database opdaviestest in Stage.',
+          user: 'system',
+          times: {
+            display: 'Dec 23, 2018 11:26:48 PM UTC +0000',
+            started: 'Dec 23, 2018 11:26:50 PM UTC +0000',
+            completed: 'Dec 23, 2018 11:26:52 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Install Drupal 8 to Dev.',
+          user: 'oliver@oliverdavies.uk (oliver@oliverdavies.uk)',
+          times: {
+            display: 'Dec 23, 2018 11:33:52 PM UTC +0000',
+            started: 'Dec 23, 2018 11:33:53 PM UTC +0000',
+            completed: 'Dec 23, 2018 11:37:21 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: 9736ef5 Importing site archive refs/heads/master',
+          user: 'vcs.commit',
+          times: {
+            display: 'Dec 23, 2018 11:36:29 PM UTC +0000',
+            started: 'Dec 23, 2018 11:36:30 PM UTC +0000',
+            completed: 'Dec 23, 2018 11:37:16 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+        {
+          text: 'Commit: 0ab620f Initial commit to Acquia Git starter repo. refs/tags/pre-import-2018-12-23',
+          user: 'vcs.commit',
+          times: {
+            display: 'Dec 23, 2018 11:36:30 PM UTC +0000',
+            started: 'Dec 23, 2018 11:36:32 PM UTC +0000',
+            completed: 'Dec 23, 2018 11:36:33 PM UTC +0000',
+          },
+          loading: false,
+          success: true,
+        },
+      ],
+    },
+  },
+}
diff --git a/src/data.json b/src/data.json
deleted file mode 100644
index 0008c82..0000000
--- a/src/data.json
+++ /dev/null
@@ -1,217 +0,0 @@
-{
-  "applications": {
-    "1": {
-      "id": 1,
-      "name": "Rebuilding Acquia",
-      "machineName": "rebuildingacquia",
-      "type": "Drupal",
-      "level": "Enterprise",
-      "environments": {
-        "dev": {
-          "name": "Dev",
-          "url": "dev.rebuilding-acquia.com",
-          "label": "develop"
-        },
-        "stage": {
-          "name": "Stage",
-          "url": "stg.rebuilding-acquia.com",
-          "label": "master"
-        },
-        "prod": {
-          "name": "Prod",
-          "url": "rebuilding-acquia.com",
-          "label": "tags/2018-12-21"
-        },
-        "ra": {
-          "name": "RA",
-          "url": "ra.rebuilding-acquia.com",
-          "label": "tags/WELCOME"
-        }
-      },
-      "tasks": [
-        {
-          "text": "Commit: fdac923 Merge branch 'update-password-policy' refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 19, 2018 3:48:29 PM UTC +0000",
-            "started": "Dec 19, 2018 3:48:29 PM UTC +0000",
-            "completed": "Dec 19, 2018 3:48:29 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: 9688c41 Update IP address refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 19, 2018 3:50:31 PM UTC +0000",
-            "started": "Dec 19, 2018 3:50:31 PM UTC +0000",
-            "completed": "Dec 19, 2018 3:50:31 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Deploy code from test to prod",
-          "user": "system",
-          "times": {
-            "display": "Dec 19, 2018 3:55:29 PM UTC +0000",
-            "started": "Dec 19, 2018 3:55:29 PM UTC +0000",
-            "completed": "Dec 19, 2018 3:55:29 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Deploy the code reference master to dev",
-          "user": "system",
-          "times": {
-            "display": "Dec 20, 2018 10:13:48 PM UTC +0000",
-            "started": "Dec 20, 2018 10:13:48 PM UTC +0000",
-            "completed": "Dec 20, 2018 10:13:48 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Deploy the code reference tags/2018-12-19 to test",
-          "user": "system",
-          "times": {
-            "display": "Dec 20, 2018 10:25:07 PM UTC +0000",
-            "started": "Dec 20, 2018 10:25:07 PM UTC +0000",
-            "completed": "Dec 20, 2018 10:25:07 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: e75c4a3 Merge branch 'voucher-code-bug-34' refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 21, 2018 12:55:49 PM UTC +0000",
-            "started": "Dec 21, 2018 12:55:49 PM UTC +0000",
-            "completed": "Dec 21, 2018 12:55:49 PM UTC +0000"
-          },
-          "status": "Failed",
-          "loading": false,
-          "success": false
-        },
-        {
-          "text": "Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 21, 2018 1:09:19 PM UTC +0000",
-            "started": "Dec 21, 2018 1:09:19 PM UTC +0000",
-            "completed": "Dec 21, 2018 1:09:19 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: 96ac151 Fix syntax refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 21, 2018 1:23:43 PM UTC +0000",
-            "started": "Dec 21, 2018 1:23:43 PM UTC +0000",
-            "completed": "Dec 21, 2018 1:23:43 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: 8056d51 Add production URLs as settings refs/heads/master",
-          "user": "system",
-          "times": {
-            "display": "Dec 21, 2018 1:34:13 PM UTC +0000",
-            "started": "Dec 21, 2018 1:34:13 PM UTC +0000",
-            "completed": "Dec 21, 2018 1:34:13 PM UTC +0000"
-          },
-          "status": "In progress",
-          "loading": true,
-          "success": true
-        }
-      ]
-    },
-    "2": {
-      "id": 2,
-      "name": "Oliver Davies",
-      "machineName": "opdaviestest",
-      "type": "Drupal",
-      "level": "Professional",
-      "environments": {
-        "dev": {
-          "name": "Dev",
-          "url": "dev.oliverdavies.uk",
-          "label": "develop"
-        },
-        "stage": {
-          "name": "Stage",
-          "url": "test.oliverdavies.uk",
-          "label": "master"
-        },
-        "prod": {
-          "name": "Prod",
-          "url": "www.oliverdavies.uk",
-          "label": "tags/2018-12-23"
-        }
-      },
-      "tasks": [
-        {
-          "text": "Create database opdaviestest in Dev.",
-          "user": "system",
-          "times": {
-            "display": "Dec 23, 2018 11:26:48 PM UTC +0000",
-            "started": "Dec 23, 2018 11:26:50 PM UTC +0000",
-            "completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Create database opdaviestest in Stage.",
-          "user": "system",
-          "times": {
-            "display": "Dec 23, 2018 11:26:48 PM UTC +0000",
-            "started": "Dec 23, 2018 11:26:50 PM UTC +0000",
-            "completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Install Drupal 8 to Dev.",
-          "user": "oliver@oliverdavies.uk (oliver@oliverdavies.uk)",
-          "times": {
-            "display": "Dec 23, 2018 11:33:52 PM UTC +0000",
-            "started": "Dec 23, 2018 11:33:53 PM UTC +0000",
-            "completed": "Dec 23, 2018 11:37:21 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: 9736ef5 Importing site archive refs/heads/master",
-          "user": "vcs.commit",
-          "times": {
-            "display": "Dec 23, 2018 11:36:29 PM UTC +0000",
-            "started": "Dec 23, 2018 11:36:30 PM UTC +0000",
-            "completed": "Dec 23, 2018 11:37:16 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        },
-        {
-          "text": "Commit: 0ab620f Initial commit to Acquia Git starter repo. refs/tags/pre-import-2018-12-23",
-          "user": "vcs.commit",
-          "times": {
-            "display": "Dec 23, 2018 11:36:30 PM UTC +0000",
-            "started": "Dec 23, 2018 11:36:32 PM UTC +0000",
-            "completed": "Dec 23, 2018 11:36:33 PM UTC +0000"
-          },
-          "loading": false,
-          "success": true
-        }
-      ]
-    }
-  }
-}
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 160489f..4e70b65 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -65,7 +65,7 @@
 import ApplicationCard from '@/components/Application/ApplicationCard'
 import ApplicationDisplaySwitcher from '@/components/Application/ApplicationDisplaySwitcher'
 import _ from 'lodash'
-import data from '@/data.json'
+import data from '@/data'
 
 export default {
   components: {
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index d4c71b2..92ba1c1 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -154,7 +154,7 @@
 <script>
 import ActionCards from '@/components/Environment/ActionCards'
 import ApplicationTags from '@/components/Application/ApplicationTags'
-import data from '@/data.json'
+import data from '@/data'
 
 export default {
   components: {
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 3d70576..910ab3d 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -79,7 +79,7 @@ import EnvironmentCards from '@/components/Environment/EnvironmentCards'
 import QuickHelp from '@/components/Environment/QuickHelp'
 import TaskLog from '@/components/Environment/TaskLog/TaskLog'
 import ToggleHelp from '@/components/Environment/ToggleHelp'
-import data from '@/data.json'
+import data from '@/data'
 
 export default {
   components: {

From bdee16fe32ca813bbad83b0d96be93e53d58edf2 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 09:05:44 +0000
Subject: [PATCH 10/19] Re-order imports

---
 src/router/index.js        | 4 ++--
 src/views/Applications.vue | 2 +-
 src/views/Environments.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 9ac83af..c4c1f71 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
-import Vue from 'vue'
-import Router from 'vue-router'
 import Applications from '@/views/Applications'
 import Environment from '@/views/Environment'
 import Environments from '@/views/Environments'
+import Router from 'vue-router'
+import Vue from 'vue'
 
 Vue.use(Router)
 
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 4e70b65..0cf6279 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -62,9 +62,9 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import ApplicationCard from '@/components/Application/ApplicationCard'
 import ApplicationDisplaySwitcher from '@/components/Application/ApplicationDisplaySwitcher'
-import _ from 'lodash'
 import data from '@/data'
 
 export default {
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 910ab3d..1de02ee 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -75,11 +75,11 @@
 
 <script>
 import ApplicationTags from '@/components/Application/ApplicationTags'
+import data from '@/data'
 import EnvironmentCards from '@/components/Environment/EnvironmentCards'
 import QuickHelp from '@/components/Environment/QuickHelp'
 import TaskLog from '@/components/Environment/TaskLog/TaskLog'
 import ToggleHelp from '@/components/Environment/ToggleHelp'
-import data from '@/data'
 
 export default {
   components: {

From 245b9ad0509a8786d3afed536ce3d04791a31680 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 09:11:14 +0000
Subject: [PATCH 11/19] Move routes

---
 src/main.js                        | 10 +++++++---
 src/{router/index.js => routes.js} |  8 ++------
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename src/{router/index.js => routes.js} (83%)

diff --git a/src/main.js b/src/main.js
index 56df248..39aecfd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
-import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
+import routes from './routes'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
 
 Vue.config.productionTip = false
 
@@ -14,7 +15,10 @@ Vue.component('navbar', Navbar);
 Vue.component('sidebar', Sidebar);
 Vue.component('title-block', TitleBlock);
 
+Vue.use(VueRouter);
+
 new Vue({
   render: h => h(App),
-  router
+
+  router: new VueRouter(routes)
 }).$mount('#app')
diff --git a/src/router/index.js b/src/routes.js
similarity index 83%
rename from src/router/index.js
rename to src/routes.js
index c4c1f71..84e3247 100644
--- a/src/router/index.js
+++ b/src/routes.js
@@ -1,12 +1,8 @@
 import Applications from '@/views/Applications'
 import Environment from '@/views/Environment'
 import Environments from '@/views/Environments'
-import Router from 'vue-router'
-import Vue from 'vue'
 
-Vue.use(Router)
-
-export default new Router({
+export default {
   routes: [
     {
       path: '/',
@@ -26,4 +22,4 @@ export default new Router({
       props: true,
     }
   ]
-})
+}

From f4fdb615aa0cafa7cfcd42fc6d67b43d14974aef Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 09:15:58 +0000
Subject: [PATCH 12/19] Group and order imports

---
 src/main.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/main.js b/src/main.js
index 39aecfd..1f3919e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,15 +1,14 @@
 import App from './App.vue'
+import HeaderButtons from '@/components/HeaderButtons'
+import Navbar from '@/components/Navbar'
 import routes from './routes'
+import Sidebar from '@/components/Sidebar'
+import TitleBlock from '@/components/TitleBlock'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.config.productionTip = false
 
-import HeaderButtons from '@/components/HeaderButtons'
-import Sidebar from '@/components/Sidebar'
-import Navbar from '@/components/Navbar'
-import TitleBlock from '@/components/TitleBlock'
-
 Vue.component('header-buttons', HeaderButtons);
 Vue.component('navbar', Navbar);
 Vue.component('sidebar', Sidebar);

From 6498782f16b0b025c92c69e31bc2892a6ec167cf Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:17:20 +0000
Subject: [PATCH 13/19] Update sidebar link colours

---
 src/components/Sidebar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b1f815f..c1fd01e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,10 +7,10 @@
             href="#0"
             class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
             :class="{
-              'bg-grey-6 text-white': link.active,
-              'border-transparent hover:bg-grey hover:text-blue-3': !link.active,
+              'bg-grey-6 text-white hover:text-white': link.active,
+              'border-transparent hover:bg-grey': !link.active,
               'text-grey-5 cursor-not-allowed': link.disabled,
-              'text-grey-6': !link.disabled,
+              'text-grey-6 hover:text-blue-3': !link.disabled && !link.active,
             }"
           >
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>

From 6f8fa650deef4e21a30922ea9f144fd1d9b49ad8 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:20:59 +0000
Subject: [PATCH 14/19] Overlap sidebar

---
 src/components/Sidebar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index c1fd01e..a144e91 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="w-auto lg:w-56 bg-grey-3 text-grey-6 antialiased fixed pin-l h-full overflow-y-scroll">
+<<<<<<< HEAD
+  <div class="w-auto lg:w-56 bg-grey-3 text-grey-6 antialiased fixed pin-l h-full overflow-y-scroll z-30 -mt-2px">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">

From e8acc1d5c570fce8ae4a804474721506c80063f6 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:28:03 +0000
Subject: [PATCH 15/19] Re-add 2px spacing

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index b8cbefa..ec99f81 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,6 +48,7 @@ module.exports = {
         '2xs': '.625rem', // 10px
       },
       spacing: {
+        '2px': '2px',
         '48': '10rem',
         '56': '14rem',
         '64': '16rem',

From a5b9dbf5c08bb45f2ad29c3bcfa9bcb45989410b Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:31:00 +0000
Subject: [PATCH 16/19] Remove conflict tag

---
 src/components/Sidebar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a144e91..04165ab 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,4 @@
 <template>
-<<<<<<< HEAD
   <div class="w-auto lg:w-56 bg-grey-3 text-grey-6 antialiased fixed pin-l h-full overflow-y-scroll z-30 -mt-2px">
     <div>
       <ul class="list-reset">

From d8d2e1e1772cacdf36eff4f938609fc3420489c5 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:31:30 +0000
Subject: [PATCH 17/19] Update hover bg colour

---
 src/components/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 04165ab..94b7cc0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -8,7 +8,7 @@
             class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
             :class="{
               'bg-grey-6 text-white hover:text-white': link.active,
-              'border-transparent hover:bg-grey': !link.active,
+              'border-transparent hover:bg-grey-4': !link.active,
               'text-grey-5 cursor-not-allowed': link.disabled,
               'text-grey-6 hover:text-blue-3': !link.disabled && !link.active,
             }"

From c93b2cce72e3fce6544f39c17912056c97f85204 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 13:33:09 +0000
Subject: [PATCH 18/19] Update grey 4 value

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index ec99f81..dc9437d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,7 +16,7 @@ module.exports = {
         '1': '#f8fafc',
         '2': '#eee',
         '3': '#ddd',
-        '4': '#b7b7b7',
+        '4': '#bbb',
         '5': '#888',
         '6': '#555',
         '7': '#333',

From a836586995e52e322033c80465f82ae2dcca51d7 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 14 Mar 2019 18:26:37 +0000
Subject: [PATCH 19/19] Fix colours

---
 src/components/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 61c1cbf..612700c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto lg:w-56 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll z-30">
+  <div class="w-auto lg:w-56 bg-grey-3 text-grey-4 antialiased fixed pin-l h-full overflow-y-scroll z-30">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">