Removed SCSS variables, and replaced with CSS --vars

src/styles/color-palette.scss

@@ -0,0 +1,17 @@
+
+:root {
+  /* Basic*/
+  --background: #0b1021;
+  --background-darker: #05070e;
+  --primary: #5cabca;
+
+  /* Modified Colors */
+  --primary-transparent: #5cabcab3;
+  --background-transparent: #0b1021cc;
+
+  /* Semi-Transparent Black*/
+  --transparent-70: #000000b3;
+  --transparent-50: #00000080;
+  --transparent-30: #0000004d;
+
+}

src/styles/color-pallet.scss

@@ -1,19 +0,0 @@
-
-
-// [data-theme="dark"] {
-//   I will put the variables here.
-// }
-
-/* Core Pallet */
-$background: #0b1021;
-$ascent: #5cabca;
-
-/* Action Colors */
-$transparent-black: #0000008a;
-$overflow-ellipse: #283e51;
-
-/* Modified Colors */
-$bg-with-opacity: rgba($background, 0.8);
-$header-color: darken($background, 5%);
-$dark-ascent: darken($ascent, 50%);
-$ascent-with-opacity: rgba($ascent, 0.7);

src/styles/global-styles.scss

@@ -1,5 +1,4 @@
 
-
 @font-face {
     font-family: 'Inconsolata';
     src: url('./assets/Inconsolata-Light.ttf');
@@ -8,16 +7,17 @@
 html {
     margin: 0;
     padding: 0;
+    transition: all 1s;
 }
 
-body {
+/* Default app font face */
+body, div, p, a, span, label, input {
     font-family: 'Inconsolata', sans-serif;
 }
 
+/* Headings font face */
 h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
-p, a, span, div, input {
-    font-family: 'Inconsolata', sans-serif;
-}
+

src/styles/themes/DemoTheme.scss

@@ -0,0 +1,4 @@
+body {
+  background: red !important;
+  border: 2px dashed yellow;
+}