Refactor/to scss modular partials

CHANGELOG.md

@@ -150,6 +150,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added Faith to 'about us'
 - Updated Mariana's title in 'about us'
 - Updated outdated dependencies
+- Added ThemeProvider component
+- Added helpers folder under utils (Directory: utils/helpers)
+- Added partials folder with mixins and settings as sub folders under styles (styles/partials)
+- Added isValidEnum a helper function
+- Added a ThemeEnum and enums folder
+- Added CSS resets partial
+- Added preconnect to google fonts CDN
 
 ### Fixed
 
@@ -158,4 +165,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 
 - Started migrating styles from Styled Components to CSS Modules (ContactUsCard)
-
+- Refactor and modularize style partials
+- Updated naming convention for variables, tokens, and mixins

components/containers/ThemeProvider/ThemeProvider.jsx

@@ -0,0 +1,19 @@
+/*
+ * ThemeProvider Component
+ * Purpose:
+ * Injects a theme base on set theme value.
+ *
+ * Application:
+ * Wrap to elements or components that needs the theme to be injected.
+ */
+
+'use client';
+
+import { isValidEnum } from '../../../utils/helpers/isValidEnum';
+import { ThemeEnumValues } from '../../../enums/ThemeEnum';
+
+const ThemeProvider = ({ theme, children }) => {
+  return <div data-theme={isValidEnum(theme, ThemeEnumValues)}>{children}</div>;
+};
+
+export { ThemeProvider };

enums/ThemeEnum.js

@@ -0,0 +1,24 @@
+/*
+ * ThemeEnum
+ * An immutable object that contains restricted values for data-theme.
+ *
+ * ThemeEnumValues
+ * An immutable Set, with values from the ThemeEnum.
+ *
+ * Purpose:
+ * To restrict values accepted by data-theme from the ThemeProvider component.
+ * This will make sure that only valid values can be set to the ThemeProvider.
+ */
+
+const ThemeEnum = Object.freeze({
+  Light: 'light',
+  Dark: 'dark',
+  // Monochrome: 'monochrome',
+  // Protanopia: 'protanopia',
+  // Deuteranopia: 'deuteranopia',
+  // Tritanopia: 'tritanopia'
+});
+
+const ThemeEnumValues = Object.freeze(new Set(Object.values(ThemeEnum)));
+
+export { ThemeEnum, ThemeEnumValues };

pages/_app.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme, GlobalStyles } from '@/styles/themeConfig';
 import '@/styles/index.scss';
+// import { ThemeProvider as Theme } from '../components/containers/ThemeProvider/ThemeProvider';
 
 function MyApp({ Component, pageProps }) {
   // Only uncomment when the darkTheme is set
@@ -12,12 +13,14 @@ function MyApp({ Component, pageProps }) {
   // };
 
   return (
+    // <Theme theme='dark'> {/**Uncomment for testing purposes**/}
     <ThemeProvider theme={lightTheme}>
       <GlobalStyles />
       <Layout>
         <Component {...pageProps} />
       </Layout>
     </ThemeProvider>
+    // </Theme>
   );
 }
 

pages/_document.js

@@ -58,6 +58,8 @@ class MyDocument extends Document {
           <meta name='twitter:image:alt' content='Web Dev Path' />
           <meta name='twitter:site' content='@WebDevPath' />
           <meta name='robots' content='index, follow' />
+          <link rel='preconnect' href='https://fonts.googleapis.com' />
+          <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
           <link
             rel='stylesheet'
             href='https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Open+Sans:wght@700&display=swap'

styles/index.scss

@@ -1,3 +1,4 @@
-@use './themes';
-@use './mixins';
-@use './variables';
+// Entry Point for CSS Resets and Theme Tokens.
+
+@use './partials/settings/themes';
+@use './partials/settings/resets';

styles/partials/mixins/_media-queries.scss

@@ -0,0 +1,63 @@
+/*** Media Query Mixins ***/
+
+/*
+ * Purpose:
+ * Use for changing CSS property values to align with the current device view port.
+ *
+ * Application:
+ * Use @include syntax to the element needing of responsive style changes. Define the properties
+ * needed to be change and override, inside the media query mixin call(@include).
+ */
+
+@use '../settings/breakpoints' as *;
+
+// Mobile
+@mixin media-mobile-sm {
+  @media (max-width: $breakpoint-mobile-sm) {
+    @content;
+  }
+}
+
+@mixin media-mobile-lg {
+  @media (max-width: $breakpoint-mobile-lg) {
+    @content;
+  }
+}
+
+// Tablet
+@mixin media-tablet-sm {
+  @media (min-width: $breakpoint-tablet-sm) {
+    @content;
+  }
+}
+
+// Desktop
+@mixin media-desktop-sm-minus {
+  @media (max-width: $breakpoint-desktop-sm-minus) {
+    @content;
+  }
+}
+
+@mixin media-desktop-sm {
+  @media (min-width: $breakpoint-desktop-sm) {
+    @content;
+  }
+}
+
+@mixin media-desktop-sm-plus {
+  @media (min-width: $breakpoint-desktop-sm-plus) {
+    @content;
+  }
+}
+
+@mixin media-desktop-md {
+  @media (min-width: $breakpoint-desktop-md) {
+    @content;
+  }
+}
+
+@mixin media-desktop-lg {
+  @media (min-width: $breakpoint-desktop-lg) {
+    @content;
+  }
+}

styles/partials/mixins/_transitions.scss

@@ -0,0 +1,18 @@
+/*** Transition Mixins  ***/
+
+/*
+ * Purpose:
+ * Ensures that the transition property works across on multiple browsers, older or modern versions.
+ * 
+ * Application:
+ * Use directly to elements needing of transitional effects. Use @include syntax and fill-up arguments 
+ * based on your need.
+ */
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -moz-transition: $args;
+  -ms-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}

styles/partials/mixins/_typography.scss

@@ -0,0 +1,68 @@
+/*** Typography Mixins ***/
+
+/*
+ * Purpose:
+ * Use to style typographic elements. Ensures typography elements aligns with the WDP Style Guide
+ * and avoid descrepancies on typography styles.
+ * 
+ * Application:
+ * Use directly to typographic elements. Use @include syntax to inject the properties needed.
+ */
+
+@use '../settings/fonts' as *;
+
+@mixin typography-header-page {
+  font-family: $font-family-primary;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-lg;
+}
+
+@mixin typography-header-sub {
+  font-family: $font-family-primary;
+  font-size: $font-size-md;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-md;
+}
+
+@mixin typography-copy {
+  font-family: $font-family-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-sm;
+}
+
+@mixin typography-label {
+  @include typography-copy;
+}
+
+@mixin typography-input {
+  @include typography-copy;
+}
+
+@mixin typography-placeholder {
+  @include typography-copy;
+}
+
+@mixin typography-link {
+  @include typography-copy;
+}
+
+@mixin typography-button {
+  @include typography-copy;
+}
+
+// Font Related Changes Only (Family, Weight, Size, Line Height, etc.)
+@mixin typography-action-hover($type) {
+  @if ($type == 'pageheader') {
+  } @else if($type == 'subheader') {
+    // >>>> Insert Property Changes Here <<<<
+  } @else if($type == 'paragraph') {
+    // >>>> Insert Property Changes Here <<<<
+  } @else if($type == 'label' or $type == 'link' or $type == 'button') {
+    // >>>> Insert Property Changes Here <<<<
+  } @else {
+    // Catch Unknown Argument Value
+    @error "Unknown Argument Value("#{$type}"): Must be either 'pageheader', 'subheader', 'paragraph', 'label', 'link', or 'button' only.";
+  }
+}

styles/partials/settings/_breakpoints.scss

@@ -0,0 +1,18 @@
+/*** Breakpoint Settings ***/
+
+// Breakpoint Tokens
+// Mobile
+$breakpoint-mobile-sm: 350px; // $sm-mobile-breakpoint
+$breakpoint-mobile-md: 578px; // $mobile-breakpoint        /* UNUSED */
+$breakpoint-mobile-lg: 767px; // $lg-mobile-breakpoint
+
+// Tablet
+$breakpoint-tablet-sm: 768px; // $tablet-breakpoint
+
+// Desktop
+$breakpoint-desktop-sm-minus: 1023px; // $desktop-breakpoint-minus
+$breakpoint-desktop-sm: 1024px; // $desktop-breakpoint
+$breakpoint-desktop-sm-plus: 1025px; // $desktop-breakpoint-plus
+$breakpoint-desktop-md: 1250px; // $medium-desktop-breakpoint
+$breakpoint-desktop-lg: 1440px; // $large-desktop-breakpoint
+$breakpoint-desktop-xl: 2560px; // $extra-large-breakpoint

styles/partials/settings/_colors.scss

@@ -0,0 +1,32 @@
+/*** Color Settings ***/
+
+/*
+ * Important:
+ * Do not use these variables directly to style elements.
+ *
+ * Purpose:
+ * This is for setting up the base colors only. All of these variables are linked to the
+ * CSS variables Theme Tokens (_themes.scss), use those for styling elements instead.
+ *
+ * Application:
+ * Use these base color variables to assign values on Theme Tokens(_themes.scss).
+ *
+ * Linking Setup:
+ * Base Colors(_colors.scss) -> Theme Tokens(_themes.scss)
+ */
+
+// Base Colors Light
+$color-white: #ffffff;
+$color-graphite: #292929;
+$color-yellow: #ffcc4c;
+$color-baby-blue: #8cd5e8;
+$color-medium-blue: #19aad1;
+$color-dark-blue: #023047;
+
+// Base Colors Dark **Temporary Colors: For testing purposes only; Change accordingly.**
+$color-black: #050505;
+$color-cement: #777777;
+$color-light-yellow: #ffecbc;
+$color-adult-blue: #2b89a0;
+$color-lumen-blue: #7bd6f0;
+$color-light-blue: #0ca0eb;