From f37a21e2320b533930a6b061a10ee51eab4e8966 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 19:10:38 -0700 Subject: [PATCH 01/10] Refactor style partials to make it modular, organize, and improve maintainability. Update variables/tokens and mixins naming convention to improve readability and easier to reference. --- styles/_mixins.scss | 57 ------------------ styles/_variables.scss | 15 ----- styles/index.scss | 6 +- styles/partials/mixins/_media-queries.scss | 63 ++++++++++++++++++++ styles/partials/mixins/_transitions.scss | 18 ++++++ styles/partials/mixins/_typography.scss | 68 ++++++++++++++++++++++ styles/partials/settings/_breakpoints.scss | 18 ++++++ styles/partials/settings/_colors.scss | 32 ++++++++++ styles/partials/settings/_fonts.scss | 34 +++++++++++ styles/partials/settings/_themes.scss | 33 +++++++++++ styles/themes.scss | 16 ----- 11 files changed, 269 insertions(+), 91 deletions(-) delete mode 100644 styles/_mixins.scss delete mode 100644 styles/_variables.scss create mode 100644 styles/partials/mixins/_media-queries.scss create mode 100644 styles/partials/mixins/_transitions.scss create mode 100644 styles/partials/mixins/_typography.scss create mode 100644 styles/partials/settings/_breakpoints.scss create mode 100644 styles/partials/settings/_colors.scss create mode 100644 styles/partials/settings/_fonts.scss create mode 100644 styles/partials/settings/_themes.scss delete mode 100644 styles/themes.scss diff --git a/styles/_mixins.scss b/styles/_mixins.scss deleted file mode 100644 index 80e8bac8..00000000 --- a/styles/_mixins.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use './variables' as *; - -@mixin transition($args...) { - -webkit-transition: $args; - -moz-transition: $args; - -ms-transition: $args; - -o-transition: $args; - transition: $args; -} - -@mixin tablet { - @media (min-width: $tablet-breakpoint) { - @content; - } -} - -@mixin desktop { - @media (min-width: $desktop-breakpoint) { - @content; - } -} - -@mixin desktop-breakpoint-plus { - @media (min-width: $desktop-breakpoint-plus) { - @content; - } -} - -@mixin medium-desktop { - @media (min-width: $medium-desktop-breakpoint) { - @content; - } -} - -@mixin large-desktop { - @media (min-width: $large-desktop-breakpoint) { - @content; - } -} - -@mixin desktop-breakpoint-minus { - @media (max-width: $desktop-breakpoint-minus) { - @content; - } -} - -@mixin mobile { - @media (max-width: $lg-mobile-breakpoint) { - @content; - } -} - -@mixin small-mobile { - @media (max-width: $sm-mobile-breakpoint) { - @content; - } -} diff --git a/styles/_variables.scss b/styles/_variables.scss deleted file mode 100644 index ac3d97d8..00000000 --- a/styles/_variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Media Query Breakpoints -$sm-mobile-breakpoint: 350px; -$mobile-breakpoint: 578px; -$lg-mobile-breakpoint: 767px; -$tablet-breakpoint: 768px; -$desktop-breakpoint-minus: 1023px; -$desktop-breakpoint: 1024px; -$desktop-breakpoint-plus: 1025px; -$medium-desktop-breakpoint: 1250px; -$large-desktop-breakpoint: 1440px; -$extra-large-breakpoint: 2560px; - -//Fonts -$copy-font: 'Assistant'; -$heading-font: 'Open Sans'; diff --git a/styles/index.scss b/styles/index.scss index 07bf9359..22173fe7 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,3 +1,3 @@ -@use './themes'; -@use './mixins'; -@use './variables'; +// Entry Point Theme Tokens. + +@use './partials/settings/themes'; diff --git a/styles/partials/mixins/_media-queries.scss b/styles/partials/mixins/_media-queries.scss new file mode 100644 index 00000000..539c4069 --- /dev/null +++ b/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; + } +} diff --git a/styles/partials/mixins/_transitions.scss b/styles/partials/mixins/_transitions.scss new file mode 100644 index 00000000..0d7e3ce1 --- /dev/null +++ b/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; +} diff --git a/styles/partials/mixins/_typography.scss b/styles/partials/mixins/_typography.scss new file mode 100644 index 00000000..a66878d5 --- /dev/null +++ b/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."; + } +} 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/_themes.scss b/styles/partials/settings/_themes.scss new file mode 100644 index 00000000..02501c04 --- /dev/null +++ b/styles/partials/settings/_themes.scss @@ -0,0 +1,33 @@ +/*** Theme Settings ***/ + +// Theming notes: +/* +Set document data-theme to dark to activate dark theme, for example + document.documentElement.setAttribute('data-theme', 'dark'); + */ + +// Improvement Recommendation: Naming Convention +// ( --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) + +@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'); - */ From 0039e71c895312159fbcdc65a1838e6f014d2b76 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 19:30:59 -0700 Subject: [PATCH 02/10] Add CSS resets to avoid styling discrepancies, and ensure consistent and accurate styling across multiple browsers. --- styles/index.scss | 2 +- styles/partials/settings/_resets.scss | 65 +++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 styles/partials/settings/_resets.scss diff --git a/styles/index.scss b/styles/index.scss index 22173fe7..ea54df03 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,3 +1,3 @@ -// Entry Point Theme Tokens. +// Entry Point for CSS Resets and Theme Tokens. @use './partials/settings/themes'; 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; +} From 0c75ed632c945976b7d8c22ec54b3c3f3ac95808 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 19:35:28 -0700 Subject: [PATCH 03/10] Import resets to style/index.scss to apply the styling. --- styles/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/index.scss b/styles/index.scss index ea54df03..edb995ca 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,3 +1,4 @@ // Entry Point for CSS Resets and Theme Tokens. @use './partials/settings/themes'; +@use './partials/settings/resets'; From bd4e1aa530de951ddfa1036ee83feb2b2d10f7be Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 20:29:50 -0700 Subject: [PATCH 04/10] Add preconnect to google font CDN for optimization. --- pages/_document.js | 2 ++ 1 file changed, 2 insertions(+) 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 { + + Date: Wed, 25 Jun 2025 21:27:28 -0700 Subject: [PATCH 05/10] Add ThemeProvider component for controlling theming --- .../containers/ThemeProvider/ThemeProvider.jsx | 7 +++++++ pages/_app.js | 15 +++++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 components/containers/ThemeProvider/ThemeProvider.jsx diff --git a/components/containers/ThemeProvider/ThemeProvider.jsx b/components/containers/ThemeProvider/ThemeProvider.jsx new file mode 100644 index 00000000..0f0d877a --- /dev/null +++ b/components/containers/ThemeProvider/ThemeProvider.jsx @@ -0,0 +1,7 @@ +'use client'; + +const ThemeProvider = ({ theme, children }) => { + return
{children}
; +}; + +export { ThemeProvider }; diff --git a/pages/_app.js b/pages/_app.js index ef275342..9eff5ed6 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 ( - - - - - - + + + + + + + + ); } From 3a9626700ab084c2813257294ec1befa0d273c06 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 23:12:00 -0700 Subject: [PATCH 06/10] Add an enum(ThemeEnum) to restrict the accepted values pass down to the ThemeProvider. Add a helper function that validates the tested value if it's included in the given enum. --- .../ThemeProvider/ThemeProvider.jsx | 14 ++++++++++- enums/ThemeEnum.js | 24 +++++++++++++++++++ pages/_app.js | 18 +++++++------- utils/helpers/isValidEnum.js | 22 +++++++++++++++++ 4 files changed, 68 insertions(+), 10 deletions(-) create mode 100644 enums/ThemeEnum.js create mode 100644 utils/helpers/isValidEnum.js diff --git a/components/containers/ThemeProvider/ThemeProvider.jsx b/components/containers/ThemeProvider/ThemeProvider.jsx index 0f0d877a..e1017319 100644 --- a/components/containers/ThemeProvider/ThemeProvider.jsx +++ b/components/containers/ThemeProvider/ThemeProvider.jsx @@ -1,7 +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}
; + 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 9eff5ed6..93cef37c 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -3,7 +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'; +// import { ThemeProvider as Theme } from '../components/containers/ThemeProvider/ThemeProvider'; function MyApp({ Component, pageProps }) { // Only uncomment when the darkTheme is set @@ -13,14 +13,14 @@ function MyApp({ Component, pageProps }) { // }; return ( - - - - - - - - + // + + + + + + + // ); } 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 }; From 79e1ad583824d2179f853ff4f47e0cd884d7f783 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 23:29:05 -0700 Subject: [PATCH 07/10] Update style theme partial comment to improve documentation and developer experience(DX). --- pages/_app.js | 2 +- styles/partials/settings/_themes.scss | 23 ++++++++++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index 93cef37c..c910ea96 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -13,7 +13,7 @@ function MyApp({ Component, pageProps }) { // }; return ( - // + // {/**Uncomment for testing purposes**/} diff --git a/styles/partials/settings/_themes.scss b/styles/partials/settings/_themes.scss index 02501c04..4dcfece4 100644 --- a/styles/partials/settings/_themes.scss +++ b/styles/partials/settings/_themes.scss @@ -1,17 +1,22 @@ /*** Theme Settings ***/ -// Theming notes: /* -Set document data-theme to dark to activate dark theme, for example - document.documentElement.setAttribute('data-theme', 'dark'); + * 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) */ -// Improvement Recommendation: Naming Convention -// ( --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) - @use './colors' as *; // Light Theme Tokens From cca9c5f3ab9a560f1cd969522489ba2d7cec6e0e Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 23:48:54 -0700 Subject: [PATCH 08/10] Update changelog --- CHANGELOG.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5dce0b56..fd2f0e9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -150,6 +150,11 @@ 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 CSS resets partial ### Fixed @@ -158,4 +163,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 From 5318a8d90c470b4ecac3be3d19d056723dc6f509 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Wed, 25 Jun 2025 23:53:44 -0700 Subject: [PATCH 09/10] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd2f0e9d..31e2ff9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -154,6 +154,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - 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 ### Fixed From 0810b3a5662d6d434e2a76da9aa8bdb6d181c621 Mon Sep 17 00:00:00 2001 From: Brian Esteban Date: Thu, 26 Jun 2025 00:30:35 -0700 Subject: [PATCH 10/10] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 31e2ff9e..ae2a59f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -156,6 +156,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Added isValidEnum a helper function - Added a ThemeEnum and enums folder - Added CSS resets partial +- Added preconnect to google fonts CDN ### Fixed