build(style): make global scss variables

CONTRIBUTING.md

@@ -128,3 +128,7 @@ All markdown files and resources for the document should be placed under the dir
 [pr]: https://github.com/researchdata-sheffield/dataviz-hub2/pulls
 [jest]: https://jestjs.io/
 [playwright]: https://playwright.dev/
+
+### Styles
+
+Place global variables in the file `src/css/_variables.scss` and use it in any scss files like `var.$varibale-name`.

gatsby-config.js

@@ -457,7 +457,14 @@ module.exports = {
       }
     },
     /*********** END RSS Feed ************* */
-    `gatsby-plugin-sass`,
+    {
+      resolve: `gatsby-plugin-sass`,
+      options: {
+        implementation: require("sass"),
+        // globally expose the contents to each sass file
+        additionalData: `@use "./src/css/_variables" as var;`
+      }
+    },
     {
       resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
       options: {

gatsby-node.js

@@ -94,7 +94,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
  *  Create pages from MDX files
  */
 exports.createPages = async ({ graphql, actions, reporter }) => {
-  console.log("----------------------------------------------------");
+  console.log("----------------gatsby-node.js---------------------");
   console.log(`Environment: ${process.env.GATSBY_ENV}`);
   console.log("MESSAGE: Creating pages from MDX files ...");
   // De-structure the createPage function from the actions object

src/css/_variables.scss

@@ -0,0 +1,6 @@
+/**
+ * Global variables
+ */
+$colour-brand-blue: #9adbe8;
+$colour-brand-purple: #440099;
+$colour-brand-black: #131e29;

src/css/index.scss

@@ -39,13 +39,6 @@
  * @import "components/forms";
  */
 
-/**
- * Global variables
- */
-$colour-brand-blue: #9adbe8;
-$colour-brand-purple: #440099;
-$colour-brand-black: #131e29;
-
 html {
   scroll-behavior: smooth !important;
   font-family: "Source Sans Pro", sans-serif;
@@ -55,13 +48,13 @@ a {
   color: #4e4e4e;
 
   &:hover {
-    color: $colour-brand-blue;
+    color: var.$colour-brand-blue;
   }
 }
 
 button:focus,
 a:focus {
-  border: 1px solid $colour-brand-blue;
+  border: 1px solid var.$colour-brand-blue;
 }
 
 p {
@@ -90,12 +83,12 @@ h6 {
 }
 
 ::-moz-selection {
-  background: $colour-brand-blue;
-  color: $colour-brand-black;
+  background: var.$colour-brand-blue;
+  color: var.$colour-brand-black;
 }
 ::selection {
-  background: $colour-brand-blue;
-  color: $colour-brand-black;
+  background: var.$colour-brand-blue;
+  color: var.$colour-brand-black;
 }
 
 textarea::placeholder {

src/css/react-tabs.scss

@@ -23,7 +23,7 @@
     &--selected {
       background: rgba(55, 65, 81, 1);
       color: white;
-      border-bottom: 2px solid $colour-brand-blue;
+      border-bottom: 2px solid var.$colour-brand-blue;
 
       &:hover {
         background: rgba(255,255,255, 1);
@@ -42,7 +42,7 @@
     }
 
     &:focus {
-      border-color: $colour-brand-blue;
+      border-color: var.$colour-brand-blue;
       outline: none;
     }
   }