diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..0322c1d --- /dev/null +++ b/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%); diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..85a3a59 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,11 @@ +module.exports = { + css: { + loaderOptions: { + sass: { + prependData: ` + @import "@/scss/_variables.scss"; + ` + } + } + } +}