diff --git a/CHANGELOG.md b/CHANGELOG.md index 5dce0b56..ae2a59f9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/components/containers/ThemeProvider/ThemeProvider.jsx b/components/containers/ThemeProvider/ThemeProvider.jsx new file mode 100644 index 00000000..e1017319 --- /dev/null +++ b/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
{children}
; +}; + +export { ThemeProvider }; diff --git a/enums/ThemeEnum.js b/enums/ThemeEnum.js new file mode 100644 index 00000000..31085a68 --- /dev/null +++ b/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 }; diff --git a/pages/_app.js b/pages/_app.js index ef275342..c910ea96 100644 --- a/pages/_app.js +++ b/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 ( + // {/**Uncomment for testing purposes**/} + // ); } diff --git a/pages/_document.js b/pages/_document.js index bf643be3..47ef0b56 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -58,6 +58,8 @@ class MyDocument extends Document { + + >>> 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."; + } +} diff --git a/styles/partials/settings/_breakpoints.scss b/styles/partials/settings/_breakpoints.scss new file mode 100644 index 00000000..e76aba64 --- /dev/null +++ b/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 diff --git a/styles/partials/settings/_colors.scss b/styles/partials/settings/_colors.scss new file mode 100644 index 00000000..9cc740c8 --- /dev/null +++ b/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; diff --git a/styles/partials/settings/_fonts.scss b/styles/partials/settings/_fonts.scss new file mode 100644 index 00000000..3ef687ec --- /dev/null +++ b/styles/partials/settings/_fonts.scss @@ -0,0 +1,34 @@ +/*** Font Settings ***/ + +/* + * Important: + * Do not use these Font Tokens directly to style elements. + * + * Purpose: + * Setup values for all font tokens. + * + * Application: + * Use the Font Tokens to create a set of predefined typography mixins. + * + * Linking Setup: + * Font Tokens(_fonts.scss) -> Predefined Typography(_typography.scss) + */ + +// Font Tokens +// Font Family +$font-family-primary: 'Assistant', sans-serif; +$font-family-secondary: 'Opens Sans', sans-serif; + +// Font Size +$font-size-sm: 1.5rem; // 24px +$font-size-md: 2.25rem; // 36px +$font-size-lg: 4.5rem; // 72px + +// Font Weight +$font-weight-regular: 400; +$font-weight-bold: 700; // Inaccurate value in WDP Style Guide (Type Kit say 600, actual value is 700). + +// Line Height +$line-height-sm: 1.9375rem; // 31px +$line-height-md: 2.875rem; // 46px +$line-height-lg: 5rem; // 80px diff --git a/styles/partials/settings/_resets.scss b/styles/partials/settings/_resets.scss new file mode 100644 index 00000000..862c02e0 --- /dev/null +++ b/styles/partials/settings/_resets.scss @@ -0,0 +1,65 @@ +/*** CSS Default Reset Settings ***/ + +/* + * Purpose: + * Change or reset the default CSS stylings to avoid descrepancies and produce more + * consintent and accurate styling across multiple browsers. + */ + +/* + * Improvement Recommendation: + * For easier px to rem unit conversion, uncomment the (:root -> font-size) reset. + * It will change the default font-size of 16px to 10px. It would be easier to divide any + * numbers to 10 instead of 16. + * + * Sample Conversion: (Scenario: the padding needs to be 31px) + * Set padding to 'padding: 3.1rem' (31px / 10px = 3.1rem). + * On default, it would be (31px / 16px = 1.9375rem). + * + * Important: + * When this(:root -> font-size: 10px) is applied, make sure to double check all style values with rem units. + * Need to adjust it accordingly to follow the new px to rem conversion. + */ + +// :root { +// font-size: 10px; +// } + +@use '../mixins/typography' as *; + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +button, +input, +select, +textarea { + font: inherit; +} + +textarea { + resize: vertical; // Prevents horizontal resizing +} + +input::placeholder { + @include typography-placeholder; + color: var(--theme-placeholder-text); +} + +a, +button { + cursor: pointer; +} + +body { + @include typography-copy; + background-color: var(--theme-body-surface); + color: var(--theme-body-text); + min-height: 100vh; // Support for Older Browser Versions + min-height: 100dvh; +} diff --git a/styles/partials/settings/_themes.scss b/styles/partials/settings/_themes.scss new file mode 100644 index 00000000..4dcfece4 --- /dev/null +++ b/styles/partials/settings/_themes.scss @@ -0,0 +1,38 @@ +/*** Theme Settings ***/ + +/* + * Purpose: + * This is for setting up themes. + * + * Application: + * Use the Light Theme Tokens for styling elements. + * + * Theme Activation: + * Use the ThemeProvider component to inject the preferred theme. + * + * Improvement Suggestion: + * Naming Convention Template (--1-2-3) i.e (--theme-card-surface) + * 1 - Type of Token (theme) + * 2 - Component or Element (card or body) + * 3 - Target Area (surface, text, border, outline, shadow) + */ + +@use './colors' as *; + +// Light Theme Tokens +:root { + --theme-body-surface: #{$color-white}; + --theme-body-text: #{$color-graphite}; + --theme-placeholder-text: #{$color-graphite}; + --bg-contact-card: #{$color-white}; + --bg-color: #eaeaea; // Not sure with this color value, I didn't see it on the WDP Style Guide. +} + +// Dark Theme Tokens +[data-theme='dark'] { + --theme-body-surface: #{$color-black}; + --theme-body-text: #{$color-cement}; + --theme-placeholder-text: #{$color-cement}; + --bg-contact-card: #{$color-black}; + --bg-color: #333; // Not sure with this color value, I didn't see it on the WDP Style Guide. +} diff --git a/styles/themes.scss b/styles/themes.scss deleted file mode 100644 index 9263240f..00000000 --- a/styles/themes.scss +++ /dev/null @@ -1,16 +0,0 @@ -:root { - --bg-contact-card: #ffffff; - --bg-color: #eaeaea; -} - -// placeholder colors -[data-theme='dark'] { - --bg-contact-card: #232431; - --bg-color: #333; -} - -// Theming notes: -/* -Set document data-theme to dark to activate dark theme, for example - document.documentElement.setAttribute('data-theme', 'dark'); - */ diff --git a/utils/helpers/isValidEnum.js b/utils/helpers/isValidEnum.js new file mode 100644 index 00000000..6f347358 --- /dev/null +++ b/utils/helpers/isValidEnum.js @@ -0,0 +1,22 @@ +/* + * Helper Function + * Purpose: + * Check the testedValue if it's included to the enumValues. + * + * @params + * - testedValue: any values to be check. + * - enumValues: a Set of enum values. + * + * @returns testedValue or throws an error. + */ + +const isValidEnum = (testedValue, enumValues) => { + if (!enumValues.has(testedValue)) { + throw new Error( + `Invalid Enum Value("${testedValue}"): Only allowed values are [${[...enumValues]}]`, + ); + } else { + return testedValue; + } +}; +export { isValidEnum };