Add a standardised set of colours

src/scss/_variables.scss

@@ -0,0 +1,64 @@
+// Colours
+
+// Primary
+
+// $red-900: hsl(6, 61%, 39%);
+$red-800: hsl(7, 49%, 25%);
+$red-700: hsl(7, 49%, 33%);
+$red-600: hsl(6, 61%, 39%);
+$red-500: hsl(7, 70%, 45%);
+// $red-400: hsl(6, 61%, 39%);
+$red-300: hsl(7, 75%, 65%);
+// $red-200: hsl(6, 61%, 39%);
+$red-100: hsl(5, 38%, 94%);
+
+$yellow-900: hsl(15, 86%, 30%);
+$yellow-800: hsl(22, 82%, 39%);
+$yellow-700: hsl(29, 80%, 44%);
+$yellow-600: hsl(36, 77%, 49%);
+$yellow-500: hsl(42, 87%, 55%);
+$yellow-400: hsl(44, 92%, 63%);
+$yellow-300: hsl(48, 94%, 68%);
+$yellow-200: hsl(48, 95%, 76%);
+$yellow-100: hsl(48, 100%, 88%);
+$yellow-000: hsl(49, 100%, 96%);
+
+// Neutrals
+
+$grey-900: hsl(45, 9%, 18%);
+$grey-800: hsl(40, 13%, 23%);
+$grey-700: hsl(37, 11%, 28%);
+$grey-600: hsl(41, 9%, 35%);
+$grey-500: hsl(41, 8%, 48%);
+$grey-400: hsl(41, 8%, 61%);
+$grey-300: hsl(39, 11%, 69%);
+$grey-200: hsl(40, 15%, 80%);
+$grey-100: hsl(43, 10%, 92%);
+$grey-050: hsl(43, 10%, 94%);
+$grey-000: hsl(40, 23%, 97%);
+
+$white: hsl(0, 0%, 100%);
+
+// Supporting
+
+$cyan-900: hsl(184, 91%, 17%);
+$cyan-800: hsl(185, 84%, 25%);
+$cyan-700: hsl(185, 81%, 29%);
+$cyan-600: hsl(184, 77%, 34%);
+$cyan-500: hsl(185, 62%, 45%);
+$cyan-400: hsl(185, 57%, 50%);
+$cyan-300: hsl(184, 65%, 59%);
+$cyan-200: hsl(184, 80%, 74%);
+$cyan-100: hsl(185, 94%, 87%);
+$cyan-000: hsl(186, 100%, 94%);
+
+$lime-900: hsl(81, 86%, 14%);
+$lime-800: hsl(81, 78%, 21%);
+$lime-700: hsl(83, 74%, 27%);
+$lime-600: hsl(83, 70%, 34%);
+$lime-500: hsl(83, 64%, 42%);
+$lime-400: hsl(83, 55%, 52%);
+$lime-300: hsl(83, 63%, 61%);
+$lime-200: hsl(83, 68%, 74%);
+$lime-100: hsl(84, 77%, 86%);
+$lime-000: hsl(83, 88%, 94%);

vue.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  }
+}