Adding styles & Configurations for R3 (#1104)

**Related Ticket:** #1098 
+ We are encouraging IMPACT team to use USWDS. This new style
configuration that uses grid-layout will be useful for IMPACT team. (I
also need this style for Carousel )

### Description of Changes
- Added grid-layout style from uswds design system
- Edited purgecss configuration to include `instance/overrides` folder
as content
- Added CSS Variables for VEDA customization colors. 

### Notes & Questions About Changes

I almost gave up getting purgecss to work, but @dzole0311 helped me
figure out what was wrong. (The default extractor doesn't allow special
characters like `:`, which we need to target specific screen size like
`tablet: ` ex. https://designsystem.digital.gov/utilities/layout-grid/
Thank you so much 🙇 @dzole0311 !

@slesaad , you don't need to review this PR, but I think it would be
beneficial to check how we are importing the styles and purging the
styles through `postcss.config`.

### Validation / Testing
This PR doesn't bring any visual change to UI, but this GHG pr uses this
branch: US-GHG-Center/veda-config-ghg#482

app/scripts/styles/styles.scss

@@ -1,5 +1,6 @@
 @forward 'uswds-theme';
 
 @use "uswds-utilities";
+@use "usa-layout-grid";
 @use "usa-banner";
 @use "usa-button";

app/scripts/styles/theme.ts

@@ -81,6 +81,10 @@ export const GlobalStyles = createGlobalStyle`
   :root {
     --base-space-multiplier: ${themeVal('layout.glspMultiplier.xsmall')};
     --base-font-family: ${themeVal('type.base.family')};
+    --veda-color-primary: ${themeVal('color.primary')};
+    --veda-color-secondary: ${themeVal('color.secondary')};
+    --veda-color-link: ${themeVal('color.link')};
+    --veda-color-base: ${themeVal('color.base')};
   }
 
   ${media.smallUp`

postcss.config.js

@@ -6,6 +6,8 @@ const vedaPath = path.resolve(CWD, '.veda/ui');
 const isVedaInstance = fs.existsSync(vedaPath);
 
 let basePath = CWD;
+let vedaUIPath = CWD;
+let contentPaths = [`${vedaUIPath}/app/**/*.{js,jsx,ts,tsx, html}`];
 let uswdsPath = path.resolve(
   basePath,
   'node_modules/@trussworks/react-uswds/lib'
@@ -16,32 +18,36 @@ let reactCalendarPath = path.resolve(
 );
 
 if (isVedaInstance) {
-  basePath = vedaPath;
+  vedaUIPath = vedaPath;
   uswdsPath = path.resolve(
-    basePath,
+    vedaUIPath,
     'node_modules/@trussworks/react-uswds/lib'
   );
   reactCalendarPath = path.resolve(
-    basePath,
+    vedaUIPath,
     'node_modules/react-calendar/dist/**/*.css'
   );
+
+  contentPaths = [
+    `${vedaUIPath}/app/**/*.{js,jsx,ts,tsx, html}`,
+    `${basePath}/overrides/**/*.{js,jsx,ts,tsx}`,
+    `${basePath}/custom-pages/**/*.{js,jsx,ts,tsx}`
+  ];
 }
 
-const contentPaths = [
-  `${basePath}/app/**/*.{js,jsx,ts,tsx}`,
-  `${uswdsPath}/index.css`,
-  reactCalendarPath
-];
+contentPaths = [...contentPaths, `${uswdsPath}/index.css`, reactCalendarPath];
 
 let plugins = [require('autoprefixer'), require('postcss-import')];
 const purge = require('@fullhuman/postcss-purgecss')({
   content: contentPaths,
+  defaultExtractor: (content) => content.match(/[A-z0-9-:\/@]+/g) || [],
   safelist: {
     deep: [/usa-banner$/],
     greedy: [/^usa-banner/]
   }
 });
 
+// Do not purge for local development.
 if (process.env.NODE_ENV !== 'development') plugins = [...plugins, purge];
 
 module.exports = {