Fix styles barrel import, extract :root to globals.scss

CHANGELOG.md

@@ -171,6 +171,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - RevealContentContainer
   - Member
   - Container
-- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
-- Updated SearchInput width to 100% for better styling
-- Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
+  - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
+  - Updated SearchInput width to 100% for better styling
+  - Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
+  - Extracted :root from themes.scss to globals.scss 
+

components/blog/BlogPostsContainer/BlogPostsContainer.module.scss

@@ -1,5 +1,4 @@
-@use '@/styles/mixins' as *;
-@use '@/styles/variables' as *;
+@use '@/styles/index' as *;
 
 .blogContainer {
   display: flex;

components/containers/Member/Member.module.scss

@@ -1,5 +1,4 @@
-@use '@/styles/mixins' as *;
-@use '@/styles/variables' as *;
+@use '@/styles/index' as *;
 
 .card {
   margin: 1rem 1rem 0 0.5rem;

pages/_app.js

@@ -1,8 +1,7 @@
 import Layout from '@/components/layout/Layout';
-import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { lightTheme, darkTheme, GlobalStyles } from '@/styles/themeConfig';
-import '@/styles/index.scss';
+import { lightTheme, GlobalStyles } from '@/styles/themeConfig';
+import '@/styles/globals.scss';
 
 function MyApp({ Component, pageProps }) {
   // Only uncomment when the darkTheme is set

styles/globals.scss

@@ -0,0 +1,15 @@
+:root {
+  --bg-contact-card: #ffffff;
+  --bg-color: #eaeaea;
+  --color-black: #000000;
+  --color-blue: #0000ee;
+  --color-dark-grey: #9ba39d;
+  --color-grey: #d9d9d9;
+  --color-white: #ffffff;
+  --color-light-bg: #8cd5e8;
+  --color-primary-content: #292929;
+  --color-transparent: transparent;
+  --color-box-shadow: rgba(0, 0, 0, 0.08);
+  --dark-bg: #023047;
+  --error: #be1313;
+}

styles/index.scss

@@ -1,3 +1,2 @@
-@use './themes';
-@use './mixins';
-@use './variables';
+@forward 'mixins';
+@forward 'variables';

styles/themes.scss

@@ -1,19 +1,3 @@
-:root {
-  --bg-contact-card: #ffffff;
-  --bg-color: #eaeaea;
-  --color-black: #000000;
-  --color-blue: #0000ee;
-  --color-dark-grey: #9ba39d;
-  --color-grey: #d9d9d9;
-  --color-white: #ffffff;
-  --color-light-bg: #8cd5e8;
-  --color-primary-content: #292929;
-  --color-transparent: transparent;
-  --color-box-shadow: rgba(0, 0, 0, 0.08);
-  --dark-bg: #023047;
-  --error: #be1313;
-}
-
 // placeholder colors
 [data-theme='dark'] {
   --bg-contact-card: #232431;