style: moved all styles in .css files except for tables.scss

src/app.js

@@ -8,13 +8,16 @@ window.vol = {
 import '@/styles/vendor/material-icons.css'
 import '@/styles/vendor/OpenSans.css'
 
-import '@/styles/scss/style.scss'
+import '@/styles/css/tailwind.css'
+
 import '@/styles/css/normalize.css'
 import '@/styles/css/base.css'
 import '@/styles/css/components.css'
 import '@/styles/css/helpers.css'
 import '@/styles/css/typography.css'
 
+import '@/styles/scss/tables.scss'
+
 import App from '@/App.vue'
 import i18n from '@/plugins/i18n'
 import router from '@/router'

src/styles/css/base.css

@@ -1,3 +1,50 @@
+:root {
+	font-size: 16px;
+
+	--main-scroll: theme('colors.grayscale.300');
+	--panels-scroll: hsl(180, 2%, 17%);
+	--toast-background: hsla(240, 12%, 16%, 0.85);
+	--toast-secondary: hsla(240, 12%, 16%, 0.15);
+	--toast-text: hsla(0, 0%, 100%, 0.85);
+
+	--primary-color: hsl(210, 100%, 52%); /* will remove variable */
+	--primary-text: theme('colors.grayscale.870'); /* will remove variable */
+	--secondary-color: hsl(46, 100%, 57%); /* will remove variable */
+}
+
+:root[data-theme='light'] {
+	--main-background: theme('colors.white');
+	--secondary-background: theme('colors.grayscale.930');
+	--foreground: theme('colors.grayscale.200');
+	--panels-background: hsl(216, 4%, 78%);
+
+	--table-bg: theme('colors.white');
+	--table-zebra: theme('colors.grayscale.900');
+	--table-highlight: theme('colors.grayscale.840');
+}
+
+:root[data-theme='dark'] {
+	--main-background: hsl(240, 10%, 8%);
+	--secondary-background: hsl(240, 12%, 16%); /* e.g. search bar bg */
+	--foreground: theme('colors.grayscale.930'); /* primary text + icons in main + search */
+	--panels-background: hsl(240, 15%, 12%); /* panel left + right bg */
+
+	--table-bg: hsl(240, 10%, 8%); /* e.g. results table bg 1st row */
+	--table-zebra: hsl(240, 15%, 11%); /* e.g. results table bg 2nd alternate */
+	--table-highlight: hsl(240, 10%, 22%); /* e.g. hover bg color on table selection */
+}
+
+:root[data-theme='purple'] {
+	--main-background: hsl(261, 74%, 6%);
+	--secondary-background: hsl(257, 61%, 10%);
+	--foreground: theme('colors.grayscale.930');
+	--panels-background: hsl(257, 70%, 9%);
+
+	--table-bg: hsl(261, 74%, 6%);
+	--table-zebra: hsl(257, 61%, 10%);
+	--table-highlight: hsl(257, 66%, 27%);
+}
+
 @layer base {
 	input[type='text'],
 	input[type='password'],

src/styles/css/helpers.css

@@ -16,3 +16,17 @@
 	/* ? Why? */
 	background-color: var(--secondary-background);
 }
+
+.release {
+	display: inline-block;
+	width: 156px;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/styles/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/styles/scss/base/_animations.scss

@@ -1,8 +0,0 @@
-@keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

src/styles/scss/base/_base.scss

@@ -1,46 +0,0 @@
-:root {
-	font-size: 16px;
-
-	--main-scroll: theme('colors.grayscale.300');
-	--panels-scroll: hsl(180, 2%, 17%);
-	--toast-background: hsla(240, 12%, 16%, 0.85);
-	--toast-secondary: hsla(240, 12%, 16%, 0.15);
-	--toast-text: hsla(0, 0%, 100%, 0.85);
-
-	--primary-color: hsl(210, 100%, 52%); // will remove variable
-	--primary-text: theme('colors.grayscale.870'); // will remove variable
-	--secondary-color: hsl(46, 100%, 57%); // will remove variable
-}
-
-:root[data-theme='light'] {
-	--main-background: theme('colors.white');
-	--secondary-background: theme('colors.grayscale.930');
-	--foreground: theme('colors.grayscale.200');
-	--panels-background: hsl(216, 4%, 78%);
-
-	--table-bg: theme('colors.white');
-	--table-zebra: theme('colors.grayscale.900');
-	--table-highlight: theme('colors.grayscale.840');
-}
-
-:root[data-theme='dark'] {
-	--main-background: hsl(240, 10%, 8%);
-	--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
-	--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
-	--panels-background: hsl(240, 15%, 12%); // panel left + right bg
-
-	--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
-	--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
-	--table-highlight: hsl(240, 10%, 22%); // e.g. hover bg color on table selection
-}
-
-:root[data-theme='purple'] {
-	--main-background: hsl(261, 74%, 6%);
-	--secondary-background: hsl(257, 61%, 10%);
-	--foreground: theme('colors.grayscale.930');
-	--panels-background: hsl(257, 70%, 9%);
-
-	--table-bg: hsl(261, 74%, 6%);
-	--table-zebra: hsl(257, 61%, 10%);
-	--table-highlight: hsl(257, 66%, 27%);
-}

src/styles/scss/style.scss

@@ -1,10 +0,0 @@
-@import '~tailwindcss/base';
-@import '~tailwindcss/components';
-@import '~tailwindcss/utilities';
-
-@import './base/base';
-@import './base/animations';
-
-@import './globals/tables';
-
-@import './tabs/tabs';

src/styles/scss/tabs/_tabs.scss

@@ -1,4 +0,0 @@
-.release {
-	display: inline-block;
-	width: 156px;
-}