Adding consistent h and p tags (#639)

* Revert "dockerize front end (#558)"

This reverts commit 89c23faf7a.

* cleans up global.scss file

* removes all unused styles

* adds h1 and h2 via tokens

* adds design to developer pipeline

* adds headers to about page

* removes heading from logo

* adds headings to HowYouHelp and MapLegend

* adds headers to explore tool page

* updates about page with p tags

* add margin-bottom spacers

* updates areaDetail with p and h tags

* update p.secondary margin-top

* sticky footer on contact page

* fixes spacing in footer

* update designer process

client/DESIGN2DEV.md

@@ -0,0 +1,68 @@
+# Design to developer pipeline
+This document tries to capture the process for designers and developers
+- Designer process
+- Developer process
+
+## Designer process
+- Designers are using a Sketch library from USWDS to ensure elements brought into the design are using USWDS 
+components and tokens.
+- <h> and <p> tags were defined using USWDS spacing, color, and typography tokens. 
+- Designs show <h> and <p> tags in context using realistic content (though content is subject to change). 
+- Designs also show additional spacing tokens used for containers.
+- Designs show the various breakpoints (using USWDS tokens as guidance) to indicate how elements shift between 
+narrow and wide screen widths.
+- If there is not a USWDS component available to fulfill an interaction need, a custom design is created, 
+keeping in mind scalability, the larger design system, and responsiveness.
+
+## Developer process
+There are a number of ways that the app is styled. 
+- global.scss
+- trusswork styling
+- sass modules (component level)
+- map styling
+
+### global.scss
+This file is meant to be central location to capture all global styles that appear on all pages for reusables HTML 
+elements. This global sass file is in the styles folder. The theme folder in the styles folder houses all the styles 
+from USWDS.
+
+The structure of the global.scss file is in accordance to the fundamental usage of USWDS:
+https://designsystem.digital.gov/documentation/fundamentals/
+
+There are 3 things that should be included in this file:
+1. Include or point to a USWDS settings file:
+- `@import "./uswds-settings.scss"`
+
+2. Point to the USWDS source code:
+- `@import "../../node_modules/uswds"`
+
+3. Include or point to your project's custom Sass. This is the bulk of the file and may be separated out in the future.
+
+Adding the following to the uswds-settings.scss file allows us to use the grid-prefixes and utilty mixins:
+
+```
+$theme-namespace: (
+  "grid": (
+    namespace: "grid-",
+    output: true,
+  ),
+  "utility": (
+    namespace: "u-",
+    output: true,
+  ),
+);
+```
+
+With these available to the global.scss file, developers can implement designs that refer to tokens identified in the 
+designs.
+
+### Trusswork styling
+When importing a component from Trussworks, their components can be styled directly in-line with classes. A good
+example of this is the Grid component.
+
+### SASS modules
+Each component has its own styling. This offers a way to keep the global.scss minimal with global styles only. It's
+still TBD on how to get the USWDS styles to apply directly to components.
+
+### Map styling
+The map's styling is largely outside of SASS. It controlled via data/mapStyle.tsx

client/src/components/AboutCard/AboutCard.tsx

@@ -28,8 +28,8 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
 
           <Grid tablet={{col: 9}}>
             <Grid row>
-              <h3 className={'j40-section-header'} data-cy={'about-screen-tool-heading'}>{props.header} </h3>
+              <h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
-              <div className={'j40-section-body'}>{props.children}</div>
+              <p>{props.children}</p>
             </Grid>
           </Grid>
 
@@ -51,9 +51,9 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
 
           <Grid tablet={{col: 9}}>
             <Grid row>
-              <h3 className={'j40-section-header'} data-cy={'about-justice-40-heading'}>{props.header}</h3>
+              <h3>{props.header}</h3>
-              <div className={'j40-section-body'}>{props.children}</div>
+              <p>{props.children}</p>
-              <div className={'j40-section-footer'}>
+              <div className={'j40-aboutcard-sm-link'}>
                 {props.actionOpenInNewTab ?
                   <a
                     className={'j40-aboutcard-link'}

client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap

@@ -28,19 +28,14 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
           class="grid-row"
           data-testid="grid"
         >
-          <h3
+          <h3>
-            class="j40-section-header"
-            data-cy="about-justice-40-heading"
-          >
             Test Header
           </h3>
-          <div
+          <p>
-            class="j40-section-body"
-          >
             Content body of the action card.
-          </div>
+          </p>
           <div
-            class="j40-section-footer"
+            class="j40-aboutcard-sm-link"
           >
             <a
               class="j40-aboutcard-link"

client/src/components/AreaDetail/areaDetail.module.scss

@@ -108,8 +108,7 @@ $featureSelectBorderColor: #00bde3;
   padding: 1rem;
 }
 
-.censusText,
+.censusText {
-.indicatorDescription {
   font-size: small;
 }
 
@@ -126,7 +125,7 @@ $featureSelectBorderColor: #00bde3;
 //Indicator box styles
 .indicatorBox {
   display: flex;
-  padding: 1.5rem 1rem;
+  padding: 0 1rem 1.5rem;
   border-bottom: $sidePanelBorder;
 
   @media screen and (max-width: $mobileBreakpoint) {
@@ -140,11 +139,6 @@ $featureSelectBorderColor: #00bde3;
   border-bottom: none;
 }
 
-.indicatorTitle {
-  font-size: large;
-  font-weight: bolder;
-}
-
 .indicatorValue {
   flex: 1 0 37%;
   align-self: center;

client/src/components/AreaDetail/areaDetail.module.scss.d.ts

@@ -17,8 +17,6 @@ declare namespace MapModuleScssNamespace {
     censusLabel:string;
     divider:string;
     indicatorBox:string;
-    indicatorTitle:string;
-    indicatorDescription:string;
     indicatorValue:string;
     score:string;
     indicatorSuperscript: string;

client/src/components/AreaDetail/index.tsx

@@ -91,12 +91,12 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
     },
     indicatorColumnHeader: {
       id: 'areaDetail.indicators.indicatorColumnHeader',
-      defaultMessage: 'INDICATORS',
+      defaultMessage: 'Indicators',
       description: 'the population of the feature selected',
     },
     percentileColumnHeader: {
       id: 'areaDetail.indicators.percentileColumnHeader',
-      defaultMessage: 'PERCENTILE (0-100)',
+      defaultMessage: 'Percentile (0-100)',
       description: 'the population of the feature selected',
     },
     poverty: {
@@ -181,7 +181,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
           <div className={styles.topRowSubTitle}>{intl.formatMessage(messages.percentile)}</div>
         </div>
         <div className={styles.categorization}>
-          <div className={styles.topRowTitle}>{intl.formatMessage(messages.categorization)}</div>
+          <h6 className={styles.topRowTitle}>{intl.formatMessage(messages.categorization)}</h6>
           <div className={styles.priority}>
             <div className={categoryCircleStyle} />
             <div className={styles.prioritization}>{categorization}</div>
@@ -207,17 +207,17 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
         </li>
       </ul>
       <div className={styles.divider}>
-        <div>{intl.formatMessage(messages.indicatorColumnHeader)}</div>
+        <h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
-        <div>{intl.formatMessage(messages.percentileColumnHeader)}</div>
+        <h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
       </div>
 
       {indicators.map((indicator, index) => (
         <li key={index} className={styles.indicatorBox} data-cy={'indicatorBox'}>
           <div>
-            <div className={styles.indicatorTitle}>{indicator.label}</div>
+            <h4>{indicator.label}</h4>
-            <div className={styles.indicatorDescription}>
+            <p className={'secondary'}>
               {indicator.description}
-            </div>
+            </p>
           </div>
           <div className={styles.indicatorValue}>
             {readablePercentile(indicator.value)}

client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap

@@ -25,9 +25,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         </div>
       </div>
       <div>
-        <div>
+        <h6>
           Categorization
-        </div>
+        </h6>
         <div>
           <div />
           <div>
@@ -67,23 +67,25 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       </li>
     </ul>
     <div>
-      <div>
+      <h6>
-        INDICATORS
+        Indicators
-      </div>
+      </h6>
-      <div>
+      <h6>
-        PERCENTILE (0-100)
+        Percentile (0-100)
-      </div>
+      </h6>
     </div>
     <li
       data-cy="indicatorBox"
     >
       <div>
-        <div>
+        <h4>
           Poverty
-        </div>
+        </h4>
-        <div>
+        <p
+          class="secondary"
+        >
           Household income is less than or equal to twice the federal "poverty level"
-        </div>
+        </p>
       </div>
       <div>
         9900
@@ -98,12 +100,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       data-cy="indicatorBox"
     >
       <div>
-        <div>
+        <h4>
           Education
-        </div>
+        </h4>
-        <div>
+        <p
+          class="secondary"
+        >
           Percent of people age 25 or older that didn’t get a high school diploma
-        </div>
+        </p>
       </div>
       <div>
         9800
@@ -118,12 +122,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       data-cy="indicatorBox"
     >
       <div>
-        <div>
+        <h4>
           Linguistic isolation
-        </div>
+        </h4>
-        <div>
+        <p
+          class="secondary"
+        >
           Households in which all members speak a non-English language and speak English less than "very well"
-        </div>
+        </p>
       </div>
       <div>
         9700
@@ -138,12 +144,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       data-cy="indicatorBox"
     >
       <div>
-        <div>
+        <h4>
           Unemployment rate
-        </div>
+        </h4>
-        <div>
+        <p
+          class="secondary"
+        >
           Number of unemployed people as a percentage of the labor force
-        </div>
+        </p>
       </div>
       <div>
         9600
@@ -158,12 +166,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       data-cy="indicatorBox"
     >
       <div>
-        <div>
+        <h4>
           Housing Burden
-        </div>
+        </h4>
-        <div>
+        <p
+          class="secondary"
+        >
           Households that are low income and spend more than 30% of their income to housing costs
-        </div>
+        </p>
       </div>
       <div>
         9500

client/src/components/HowYouCanHelp/howYouCanHelp.module.scss

@@ -9,11 +9,6 @@
   }
 }
 
-.howYouCanHelpHeader {
-  color: $headingFontColor;
-  font-weight: normal;
-}
-
 .howYouCanHelpList {
   list-style-type: disc;
   padding-bottom: 1rem;

client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts

@@ -1,7 +1,6 @@
 declare namespace HowYouCanHelpModuleScssNamespace {
   export interface IHowYouCanHelpModuleScss {
     howYouCanHelpContainer: string;
-    howYouCanHelpHeader: string;
     howYouCanHelpBullet: string,
     listWrapper: string;
     howYouCanHelpText: string;

client/src/components/HowYouCanHelp/index.tsx

@@ -10,7 +10,7 @@ const HowYouCanHelp = () => {
   const messages = defineMessages({
     youCanHelpHeader: {
       id: 'howYouCanHelp.header.text',
-      defaultMessage: 'How You Can Help Improve the Tool',
+      defaultMessage: 'How you can help improve the tool',
       description: 'the header of the how you can help section',
     },
     youCanHelpInfoText: {
@@ -52,7 +52,7 @@ const HowYouCanHelp = () => {
 
   return (
     <div className={styles.howYouCanHelpContainer}>
-      <h2 className={styles.howYouCanHelpHeader}>
+      <h2>
         {intl.formatMessage(messages.youCanHelpHeader)}
       </h2>
       <ul className={styles.howYouCanHelpListWrapper}>

client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
 <DocumentFragment>
   <div>
     <h2>
-      How You Can Help Improve the Tool
+      How you can help improve the tool
     </h2>
     <ul>
       <li>

client/src/components/J40Footer.tsx

@@ -73,6 +73,7 @@ const J40Footer = () => {
     [
       intl.formatMessage(messages.moreinfoheader),
       <a
+        className={'footer-link-first-child'}
         key={'whitehouselink2'}
         href={'https://www.whitehouse.gov/'}
         target={'_blank'}
@@ -95,6 +96,7 @@ const J40Footer = () => {
     [
       intl.formatMessage(messages.questionsheader),
       <a
+        className={'footer-link-first-child'}
         key={'contactlink'}
         href={'https://www.usa.gov/'}>
         {intl.formatMessage(messages.contactlink)}
@@ -109,7 +111,7 @@ const J40Footer = () => {
     // `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
     // `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
     <footer className={'j40-footer'}>
-      <div className="usa-footer__primary-section">
+      <div className="usa-footer__primary-section pb">
         <J40MainGridContainer>
           <div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
             {NAVLINKS.map((links, i) => (
@@ -134,9 +136,7 @@ const J40Footer = () => {
                 src={whitehouseIcon}
                 alt={intl.formatMessage(messages.whitehouselogoalt)}/>
             }
-            heading={<p
+            heading={<h5>{intl.formatMessage(messages.logotitle)}</h5>}
-              className={'j40-footer-logo-heading'}>
-              {intl.formatMessage(messages.logotitle)}</p>}
           />
         </J40MainGridContainer>
       </div>

client/src/components/J40Header.tsx

@@ -93,13 +93,15 @@ const J40Header = () => {
         className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <h1 className="usa-logo">
+            {/* Removing h1 from logo ease transition to USWDS tokens in headers */}
+            {/* https://wehavezeal.com/blog/web-development/2016/01/12/should-i-use-the-h1-tag-for-my-website-logo */}
+            <div className="usa-logo">
               <img className="j40-sitelogo" src={siteLogo} alt={`${titleL1} ${titleL2}`} />
               <span className={'usa-logo__text j40-title'}>
                 <span className={'j40-title-line1'}>{titleL1}</span><br/>
                 <span className={'j40-title-line2'}>{titleL2}</span>
               </span>
-            </h1>
+            </div>
             <NavMenuButton
               key={'mobileMenuButton'}
               onClick={toggleMobileNav}

client/src/components/J40MainGridContainer.tsx

@@ -3,7 +3,7 @@
 import React, {ReactNode} from 'react';
 import {GridContainer} from '@trussworks/react-uswds';
 
-interface ILayoutProps {
+interface IJ40MainGridContainer {
   children: ReactNode,
   fullWidth?: boolean,
    blueBackground?: boolean,
@@ -14,19 +14,19 @@ const J40MainGridContainer = ({
   children,
   fullWidth = false,
   blueBackground = false,
-  className = ''}: ILayoutProps) => {
+  className = ''}: IJ40MainGridContainer) => {
   // is it a blue background strip?
   className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
 
   return fullWidth ? (
     <div
-      className={'j40-grid-container ' + className}>
+      className={className}>
       {children}
     </div>
   ) : (
     <GridContainer
       containerSize={'desktop-lg'}
-      className={'j40-grid-container ' + className}>
+      className={className}>
       {children}
     </GridContainer>
   );

client/src/components/MapLegend/index.tsx

@@ -74,7 +74,7 @@ const MapLegend = () => {
 
   return (
     <div className={styles.legendContainer}>
-      <h3 className={styles.legendHeader}>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h3>
+      <h6>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h6>
       <div className={styles.swatchContainer}>
         <div className={styles.legendItem}>
           <div className={styles.colorSwatch} id={styles.prioritized} />

client/src/components/MapLegend/mapLegend.module.scss

@@ -9,7 +9,7 @@ $alertInfoColor: #e7f6f8;
   margin: 1rem 1.2rem 1rem 2.5rem;
   font-size: 0.8em;
   border: 1px solid #8c9297;
-  padding: 0 1.8rem;
+  padding: 1rem 1.8rem 0;
   flex: 1;
   color: $headingFontColor;
 
@@ -23,9 +23,6 @@ $alertInfoColor: #e7f6f8;
   }
 }
 
-.legendHeader {
-  margin-bottom: 0;
-}
 
 .swatchContainer {
   display: flex;

client/src/components/MapLegend/mapLegend.module.scss.d.ts

@@ -1,7 +1,6 @@
 declare namespace HowYouCanHelpModuleScssNamespace {
   export interface IHowYouCanHelpModuleScss {
     legendContainer: string;
-    legendHeader: string;
     swatchContainer: string;
     colorSwatch: string;
     prioritized: string,

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -6,10 +6,10 @@ exports[`J40Footer renders correctly 1`] = `
     class="j40-footer"
   >
     <div
-      class="usa-footer__primary-section"
+      class="usa-footer__primary-section pb"
     >
       <div
-        class="grid-container-desktop-lg j40-grid-container "
+        class="grid-container-desktop-lg"
         data-testid="gridContainer"
       >
         <div
@@ -82,6 +82,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="footer-link-first-child"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
                     target="_blank"
@@ -132,6 +133,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="footer-link-first-child"
                     href="https://www.usa.gov/"
                   >
                     Find a contact at USA.gov
@@ -147,7 +149,7 @@ exports[`J40Footer renders correctly 1`] = `
       class="usa-footer__secondary-section"
     >
       <div
-        class="grid-container-desktop-lg j40-grid-container "
+        class="grid-container-desktop-lg"
         data-testid="gridContainer"
       >
         <div
@@ -166,11 +168,9 @@ exports[`J40Footer renders correctly 1`] = `
           <div
             class="mobile-lg:grid-col-auto"
           >
-            <p
+            <h5>
-              class="j40-footer-logo-heading"
-            >
               Council on Environmental Quality
-            </p>
+            </h5>
           </div>
         </div>
       </div>

client/src/data/constants.tsx

@@ -143,7 +143,7 @@ export const EXPLORE_TOOL_PAGE_TEXT = defineMessages({
   },
   LEGEND_LABEL: {
     id: 'legend.colorkey.label',
-    defaultMessage: 'COLOR KEY',
+    defaultMessage: 'Color key',
     description: 'the label of the key in the legend',
   },
 });

client/src/pages/cejst.module.scss

@@ -1,13 +1,5 @@
 @import "../components/utils.scss";
 
-$primary-color: #112f4e;
-
-h1.explorePageHeader {
-  font-weight: bolder;
-  margin-bottom: 0;
-  color: $headingFontColor;
-}
-
 .explorePageSubHeader {
   display: flex;
   flex-wrap: wrap;

client/src/pages/cejst.tsx

@@ -24,39 +24,45 @@ const CEJSTPage = ({location}: IMapPageProps) => {
       <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
     </J40MainGridContainer>
 
-    <J40MainGridContainer className={'j40-main-content'}>
+    <J40MainGridContainer>
-      <Grid row><Grid col>
+      <Grid row className={'j40-mb-5'}>
-        <section>
+        <Grid col>
-          <h1 className={styles.explorePageHeader}>Explore the tool</h1>
+          <section>
-          <div className={styles.explorePageSubHeader}>
+            <h1 className={styles.explorePageHeader}>Explore the tool</h1>
-            <div className={styles.explorePageHeaderText}>
+            <div className={styles.explorePageSubHeader}>
-              <p>
+              <div className={styles.explorePageHeaderText}>
+                <p>
               Zoom into the map to see which communities the tool has currently
               identified as prioritized (the top 25% of communities) or on the
               threshold. Learn more about the formula and datasets that were
               used to prioritize these communities on the
-                {` `}
+                  {` `}
-                <Link to={'/methodology'}>Data & methodology</Link>
+                  <Link to={'/methodology'}>Data & methodology</Link>
-                {` `}
+                  {` `}
               page.
-              </p>
+                </p>
+              </div>
+              <MapLegend />
             </div>
-            <MapLegend />
+          </section>
-          </div>
+        </Grid>
-        </section>
+      </Grid>
-      </Grid></Grid>
 
-      <Grid row><Grid col>
+      <Grid row>
-        <section>
+        <Grid col>
-          <MapWrapper location={location}/>
+          <section>
-        </section>
+            <MapWrapper location={location}/>
-      </Grid></Grid>
+          </section>
+        </Grid>
+      </Grid>
 
-      <Grid row><Grid col>
+      <Grid row>
-        <section>
+        <Grid col>
-          <HowYouCanHelp/>
+          <section>
-        </section>
+            <HowYouCanHelp/>
-      </Grid></Grid>
+          </section>
+        </Grid>
+      </Grid>
     </J40MainGridContainer>
   </Layout>);
 };

client/src/pages/contact.tsx

@@ -20,28 +20,33 @@ const ContactPage = ({location}: ContactPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'usa-prose'}>
+      <J40MainGridContainer>
-        <Grid row><Grid col>
+        <Grid row>
-          <h2><FormattedMessage
+          <Grid col>
-            id={'contact.pageheader'}
+            <h1>
-            description={'H2 header for contact page'}
+              <FormattedMessage
-            defaultMessage={'Contact'}/></h2>
+                id={'contact.pageheader'}
-          <h3><FormattedMessage
+                description={'H2 header for contact page'}
-            id={'contact.sectionheader'}
+                defaultMessage={'Contact'}/>
-            description={'Heading for page to allow users to contact project maintainers'}
+            </h1>
-            defaultMessage={'Email us'}/></h3>
+            <h2>
-
+              <FormattedMessage
-          <p>
+                id={'contact.sectionheader'}
-            <FormattedMessage
+                description={'Heading for page to allow users to contact project maintainers'}
-              id={'contact.general'}
+                defaultMessage={'Email us'}/>
-              description={'Contact page body text'}
+            </h2>
-              defaultMessage={`For general feedback, email {general_email_address}`}
+            <p>
-              values={{
+              <FormattedMessage
-                general_email_address:
+                id={'contact.general'}
+                description={'Contact page body text'}
+                defaultMessage={`For general feedback, email {general_email_address}`}
+                values={{
+                  general_email_address:
                     <a href={`mailto:${generalEmail}`}>{generalEmail}</a>,
-              }}/>
+                }}/>
-          </p>
+            </p>
-        </Grid></Grid>
+          </Grid>
+        </Grid>
       </J40MainGridContainer>
     </Layout>
   );

client/src/pages/index.test.tsx

@@ -7,6 +7,11 @@ import {LocalizedComponent} from '../test/testHelpers';
 // See ticket: #550
 jest.spyOn(console, 'error').mockImplementation(() => {});
 
+beforeAll(() => {
+  // Restore mock after all tests are done, so it won't affect other test suites
+  jest.resetAllMocks();
+});
+
 afterAll(() => {
   // Restore mock after all tests are done, so it won't affect other test suites
   jest.resetAllMocks();

client/src/pages/index.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
 
+import AboutCard from '../components/AboutCard/AboutCard';
+import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
 import AlertWrapper from '../components/AlertWrapper';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import AboutCard from '../components/AboutCard/AboutCard';
 
 // @ts-ignore
 import aboutUSMapImg from '../images/about-usmap.svg';
@@ -22,7 +23,6 @@ import commentIcon from // @ts-ignore
 
 import githubIcon from // @ts-ignore
   '/node_modules/uswds/dist/img/usa-icons/github.svg';
-import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
 
 
 interface IndexPageProps {
@@ -79,7 +79,7 @@ const IndexPage = ({location}: IndexPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'j40-about-page'}>
+      <J40MainGridContainer>
 
         <AboutCardsContainer>
           <AboutCard
@@ -123,21 +123,22 @@ const IndexPage = ({location}: IndexPageProps) => {
                 infrastructure.
                   `}/>
 
-            <p><FormattedMessage
+            <p>
-              id={'index.aboutContent.p3'}
+              <FormattedMessage
-              description={'paragraph 3 of main content on index page'}
+                id={'index.aboutContent.p3'}
-              defaultMessage={`
+                description={'paragraph 3 of main content on index page'}
+                defaultMessage={`
                   Read more about the Justice40 Initiative in President Biden’s 
                   {presidentLink}
                   `}
-              values={{
+                values={{
-                presidentLink:
+                  presidentLink:
                   <a
                     href={intl.formatMessage(messages.presidentalLinkUri)}
                     target="_blank"
                     rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
                   </a>,
-              }}/>
+                }}/>
             </p>
 
           </AboutCard>
@@ -147,8 +148,8 @@ const IndexPage = ({location}: IndexPageProps) => {
       <J40MainGridContainer
         fullWidth={true}
         blueBackground={true}>
-        <J40MainGridContainer
+        <J40MainGridContainer>
-          className={'j40-about-page'}>
+          <h2>How to get started</h2>
           <AboutCardsContainer>
             <AboutCard
               size={'small'}
@@ -174,8 +175,8 @@ const IndexPage = ({location}: IndexPageProps) => {
         </J40MainGridContainer>
       </J40MainGridContainer>
 
-      <J40MainGridContainer
+      <J40MainGridContainer>
-        className={'j40-about-page'}>
+        <h2>Get involved</h2>
         <AboutCardsContainer>
           <AboutCard
             size={'small'}

client/src/pages/methodology.tsx

@@ -47,7 +47,7 @@ const IndexPage = ({location}: MethodPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'j40-main-content'}>
+      <J40MainGridContainer>
         <h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
         <Grid row gap>
           <Grid col={12} tablet={{col: 6}}>
@@ -75,9 +75,11 @@ const IndexPage = ({location}: MethodPageProps) => {
       </J40MainGridContainer>
 
       <J40MainGridContainer>
-        <Grid row><Grid col>
+        <Grid row>
-          <ScoreStepsList/>
+          <Grid col>
-        </Grid></Grid>
+            <ScoreStepsList/>
+          </Grid>
+        </Grid>
       </J40MainGridContainer>
     </Layout>
   );

client/src/pages/timeline.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 
+
+// THIS COMPONENT IS NOT BEING USED
+
 // @ts-ignore
-import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
+// import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
 
 interface TimelinePageProps {
   location: Location;
@@ -10,17 +13,17 @@ interface TimelinePageProps {
 
 const TimelinePage = ({location}: TimelinePageProps) => {
   return (<Layout location={location}>
-    <section className={'usa-prose'}>
+    <section>
-      <h1>Timeline</h1>
+      {/* <h1>Timelin</h1>
       <h2>Throughout the Process</h2>
       <div className="grid-col">
         <div className="grid-row grid-gap-lg">
           <div className="grid-col-1">
             <img
-              className={'flex-align-self-center width-4'}
+              className={''}
               src={renewIcon} alt={'renew icon'}/>
           </div>
-          <div className={'usa-prose text-asset-container ' +
+          <div className={'text-asset-container ' +
           'grid-col-fill'}>
             <p>Continuously engage with stakeholders and community
               members to get feedback on the screening tool, scoring,
@@ -55,7 +58,7 @@ const TimelinePage = ({location}: TimelinePageProps) => {
           <p>Create a public scorecard to ensure accountability of
               investments by February 2022.</p>
         </li>
-      </ol>
+      </ol> */}
     </section>
   </Layout>
   );

client/src/styles/global.scss

@@ -1,47 +1,109 @@
-/*
+// other CSS libraries:
-  These are necessary for the image and font urls referenced in the source
-  files to resolve correctly.
-*/
-$theme-image-path: "../../node_modules/uswds/src/img";
-$theme-font-path: "../../node_modules/uswds/src/fonts";
-
-/*
-  Example:
-
-  The url for the hero image in the source file is not currently prefixed by
-  the $theme-image-path above.
-
-  $theme-hero-image: '#{$theme-image-path}/hero.png';
-*/
-
-// Custom USWDS changes to variables go here
-// see https://designsystem.digital.gov/documentation/settings/
-$theme-show-compile-warnings: false;
-$theme-show-notifications: false;
-
-$theme-font-role-heading: "sans";
-
-@import "../../node_modules/uswds";
-
 @import "~@trussworks/react-uswds/lib/index.css";
 @import "../../node_modules/mapbox-gl/dist/mapbox-gl.css";
 
-// Custom SASS/CSS goes here
+/*
-$j40-max-width: 80ex;
+According to the fundamental usage of USWDS:
+https://designsystem.digital.gov/documentation/fundamentals/
+
+There are 3 things that should be included in this file:
+*/
+
+// 1. Include or point to a USWDS settings file:
+@import "./uswds-settings.scss";
+
+// 2. Point to the USWDS source code:
+@import "../../node_modules/uswds";
+
+// 3. Include or point to your project's custom Sass
+/* 
+  Instead of having a separate file for these styles, all styles are being placed here.
+  - Global styles
+  - Layout styles
+    -- Header styles
+    -- Main content styles
+    -- Footer styles
+  - Component styles
+    -- Alert styles
+    -- Map styles
+    -- Timeline/process list styles
+    -- About styles
+*/
+
+
+
+
+/***************** GLOBAL STYLES **************************************************************/
+
 $primary-color: #112f4e;
 $j40-blue-background-color: #EFF6FB;
 
-#main-content {
+// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
-  border-top: 0;
+// Arguments to the mixins must be tokens from USWDS
+@mixin j40-element($font-size, $line-height, $font-weight, $margin-top, $margin-bottom: 0) {
+  @include typeset('sans', $font-size, $line-height); 
+  @include u-text($font-weight);  
+  @include u-margin-top($margin-top);
+  @include u-margin-bottom($margin-bottom);
 }
 
-@include at-media("mobile-lg") {
+h1 {
-  .j40-grid-container {
+  @include j40-element('3xl', 2, 'bold', 5 );
-    line-height: 1.5rem;
-    padding-right: 0;
-  }
 }
 
+h2 {
+  @include j40-element('xl', 2, 'bold', 4 );
+}
+
+h3 {
+  @include j40-element('lg', 2, 'bold', 4 );
+}
+
+h4 {
+  @include j40-element('sm', 1, 'bold', 3 );
+}
+
+h5 {
+  @include j40-element('md', 4, 'bold', 0 );
+}
+
+h6 {
+  @include j40-element('3xs', 1, 'normal', 0);
+}
+
+p {
+  @include j40-element('sm', 4, 'normal', 2.5);
+}
+
+p.secondary {
+  @include j40-element('3xs', 4, 'normal', .5);
+}
+
+// 40 pixel margin-bottom
+.j40-mb-5 {
+  @include u-margin-bottom(5)
+}
+
+// 24 pixel margin-bottom
+.j40-mb-3 {
+  @include u-margin-bottom(3)
+}
+
+
+
+
+/***************** LAYOUT STYLES **************************************************************
+This section will outline styles for components that are on each page. These 
+components include:
+
+- header styles
+- main content styles
+- footer styles
+
+******************************
+*      HEADER STYLES
+****************************** 
+*/ 
 .j40-header,
 .j40-primary-nav,
 .j40-header > li > a {
@@ -49,7 +111,7 @@ $j40-blue-background-color: #EFF6FB;
   z-index: 5;
 
   .usa-nav-container {
-    max-width: ($j40-max-width * 2);
+    max-width: 76rem;
   }
 
   span {
@@ -114,7 +176,38 @@ $j40-blue-background-color: #EFF6FB;
   }
 }
 
+
+/* 
+******************************
+*      MAIN CONTENT STYLES
+****************************** 
+*/
+
+/* this is used by J40MainGridContainer to show a blue background */
+.j40-main-grid-blue-bk {
+  background-color: $j40-blue-background-color;
+
+  // This style is to remove the margin collapse occuring
+  border-top: 1px solid $j40-blue-background-color;
+}
+
+#main-content {
+  border-top: 0;
+  min-height: 60vh;
+}
+
+
+/* 
+******************************
+*      FOOTER STYLES
+****************************** 
+*/ 
 .j40-footer {
+
+  .usa-footer__primary-section.pb{
+    @include u-padding-bottom(2);
+  }
+
   .j40-footer-logo {
     font-weight: bold;
   }
@@ -127,72 +220,29 @@ $j40-blue-background-color: #EFF6FB;
       line-height: 1.5;
     }
   }
-}
 
-// spacing top & bottom around main content
+  .footer-link-first-child{
-.j40-main-content {
+    display: inline-block;
-  @include at-media("mobile-lg") {
+    @include u-margin-top(1.5)
-    margin-bottom: 0;
-    margin-top: 2.5rem;
-  }
-
-  h1 {
-    font-size: 2.7rem;
-  }
-
-  h2 {
-    font-size: 1.46rem;
   }
 }
 
-// we can use to to make all section headers consistent
-.j40-section-sm-header {
-  font-weight: bold;
-  padding-bottom: 0.24rem;
-  padding-right: 0.24rem;
-}
-
-.j40-section-sm-body {
-  line-height: 1.5;
-  padding-bottom: 1.2rem;
-  padding-right: 1.2rem;
-
-}
-
-.j40-section-sm-footer {
-  padding-bottom: 0.5rem;
-}
 
 
-// This should really be part of uswds and use $theme-step-indicator-segment-color-complete
-// The Progress element doesn't really support color changing the line connecting progress
-// (like the Steps element does) and the checkbox.
-// The border-left-color required an !important to make work. Maybe add a feature request
-// to have the process list officially support a more Steps-like behavior
-.j40-usa-process-list__item--complete {
-  &::before {
-    color: white;
-    background-color: #00a91c;
-  }
 
-  border-left-color: #005ea2 !important; // todo: fix
+/***************** COMPONENT STYLES **************************************************************
-}
+This section will outline styles that are component specific
 
-// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
+- alert
-.usa-prose {
+- map
-  h1,
+- timeline
-  h2,
+- about
-  h3,
-  h4 {
-    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
-    sans-serif;
-  }
 
-  p,
+/* 
-  div {
+******************************
-    max-width: $j40-max-width;
+*      ALERT STYLES
-  }
+****************************** 
-}
+*/
 
 .j40-sitealert {
   p {
@@ -225,6 +275,13 @@ $j40-blue-background-color: #EFF6FB;
   }
 }
 
+
+/* 
+******************************
+*      MAP STYLES
+****************************** 
+*/
+
 // Maplibre overrides
 // Note that these need to be here to properly override defaults
 
@@ -324,6 +381,12 @@ $j40-blue-background-color: #EFF6FB;
 }
 
 
+/* 
+***************************************
+*      TIMELINE / PROCESS LIST STYLES
+*************************************** 
+*/ 
+
 /* the > is for child only syntax in css. This is required so that lists that are nested under the
       list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
 .j40-process-list-wrapper > {
@@ -417,10 +480,12 @@ ul.j40-process-nested-list {
   font-style: italic;
 }
 
-/* this is used by J40MainGridContainer to show a blue background */
+
-.j40-main-grid-blue-bk {
+/* 
-  background-color: $j40-blue-background-color;
+******************************
-}
+*      ABOUT CARD STYLES
+****************************** 
+*/
 
 /* about card - based on datasetCard... need to combine */
 .j40-aboutcard-container {
@@ -438,15 +503,6 @@ ul.j40-process-nested-list {
       align-self: flex-start;
     }
 
-    .j40-aboutcard-header {
-    }
-
-    .j40-aboutcard-body {
-    }
-
-    .j40-aboutcard-footer {
-    }
-
     .j40-aboutcard-link {
       font-weight: bold;
     }
@@ -463,19 +519,13 @@ ul.j40-process-nested-list {
       width: 3rem;
     }
 
-    .j40-aboutcard-header {
-    }
-
-    .j40-aboutcard-body {
-    }
-
-    .j40-aboutcard-footer {
-    }
-
     .j40-aboutcard-link {
       font-weight: bold;
     }
-  }
 
+    div.j40-aboutcard-sm-link {
+      @include u-margin-top(2);
+    }
+  }
 }
 

client/src/styles/theme/_uswds-theme-color.scss

@@ -0,0 +1,147 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+COLOR SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS color tokens in the documentation:
+https://designsystem.digital.gov/design-tokens/color
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Theme palette colors
+----------------------------------------
+*/
+
+// Base colors
+$theme-color-base-family: "gray-cool";
+$theme-color-base-lightest: "gray-5";
+$theme-color-base-lighter: "gray-cool-10";
+$theme-color-base-light: "gray-cool-30";
+$theme-color-base: "gray-cool-50";
+$theme-color-base-dark: "gray-cool-60";
+$theme-color-base-darker: "gray-cool-70";
+$theme-color-base-darkest: "gray-90";
+$theme-color-base-ink: "gray-90";
+
+// Primary colors
+$theme-color-primary-family: "blue";
+$theme-color-primary-lightest: false;
+$theme-color-primary-lighter: "blue-10";
+$theme-color-primary-light: "blue-30";
+$theme-color-primary: "blue-60v";
+$theme-color-primary-vivid: "blue-warm-60v";
+$theme-color-primary-dark: "blue-warm-70v";
+$theme-color-primary-darker: "blue-warm-80v";
+$theme-color-primary-darkest: false;
+
+// Secondary colors
+$theme-color-secondary-family: "red";
+$theme-color-secondary-lightest: false;
+$theme-color-secondary-lighter: "red-cool-10";
+$theme-color-secondary-light: "red-30";
+$theme-color-secondary: "red-50";
+$theme-color-secondary-vivid: "red-cool-50v";
+$theme-color-secondary-dark: "red-60v";
+$theme-color-secondary-darker: "red-70v";
+$theme-color-secondary-darkest: false;
+
+// Accent warm colors
+$theme-color-accent-warm-family: "orange";
+$theme-color-accent-warm-lightest: false;
+$theme-color-accent-warm-lighter: "orange-10";
+$theme-color-accent-warm-light: "orange-20v";
+$theme-color-accent-warm: "orange-30v";
+$theme-color-accent-warm-dark: "orange-50v";
+$theme-color-accent-warm-darker: "orange-60";
+$theme-color-accent-warm-darkest: false;
+
+// Accent cool colors
+$theme-color-accent-cool-family: "blue-cool";
+$theme-color-accent-cool-lightest: false;
+$theme-color-accent-cool-lighter: "blue-cool-5v";
+$theme-color-accent-cool-light: "blue-cool-20v";
+$theme-color-accent-cool: "cyan-30v";
+$theme-color-accent-cool-dark: "blue-cool-40v";
+$theme-color-accent-cool-darker: "blue-cool-60v";
+$theme-color-accent-cool-darkest: false;
+
+/*
+----------------------------------------
+State palette colors
+----------------------------------------
+*/
+
+// Error colors
+$theme-color-error-family: "red-warm";
+$theme-color-error-lighter: "red-warm-10";
+$theme-color-error-light: "red-warm-30v";
+$theme-color-error: "red-warm-50v";
+$theme-color-error-dark: "red-60v";
+$theme-color-error-darker: "red-70";
+
+// Warning colors
+$theme-color-warning-family: "gold";
+$theme-color-warning-lighter: "yellow-5";
+$theme-color-warning-light: "yellow-10v";
+$theme-color-warning: "gold-20v";
+$theme-color-warning-dark: "gold-30v";
+$theme-color-warning-darker: "gold-50v";
+
+// Success colors
+$theme-color-success-family: "green-cool";
+$theme-color-success-lighter: "green-cool-5";
+$theme-color-success-light: "green-cool-20v";
+$theme-color-success: "green-cool-40v";
+$theme-color-success-dark: "green-cool-50";
+$theme-color-success-darker: "green-cool-60";
+
+// Info colors
+$theme-color-info-family: "cyan";
+$theme-color-info-lighter: "cyan-5";
+$theme-color-info-light: "cyan-20";
+$theme-color-info: "cyan-30v";
+$theme-color-info-dark: "cyan-40v";
+$theme-color-info-darker: "blue-cool-60";
+
+// Disabled colors
+$theme-color-disabled-family: "gray";
+$theme-color-disabled-light: "gray-10";
+$theme-color-disabled: "gray-20";
+$theme-color-disabled-dark: "gray-30";
+
+// Emergency colors
+$theme-color-emergency: "red-warm-60v";
+$theme-color-emergency-dark: "red-warm-80";
+
+/*
+----------------------------------------
+General colors
+----------------------------------------
+*/
+
+// Body
+$theme-body-background-color: "white";
+
+// Text
+$theme-text-color: "ink";
+$theme-text-reverse-color: "white";
+
+// Links
+$theme-link-color: "primary";
+$theme-link-visited-color: "violet-70v";
+$theme-link-hover-color: "primary-dark";
+$theme-link-active-color: "primary-darker";
+$theme-link-reverse-color: "base-lighter";
+$theme-link-reverse-hover-color: "base-lightest";
+$theme-link-reverse-active-color: "white";

client/src/styles/theme/_uswds-theme-components.scss

@@ -0,0 +1,181 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+COMPONENT SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS style tokens in the documentation:
+https://designsystem.digital.gov/design-tokens
+----------------------------------------
+*/
+
+// Accordion
+$theme-accordion-border-width: 0.5;
+$theme-accordion-border-color: "base-lightest";
+$theme-accordion-font-family: "body";
+
+// Alert
+$theme-alert-bar-width: 1;
+$theme-alert-font-family: "ui";
+$theme-alert-icon-size: 5;
+$theme-alert-padding-x: 2.5;
+$theme-alert-text-color: default;
+$theme-alert-text-reverse-color: default;
+$theme-alert-link-color: default;
+$theme-alert-link-reverse-color: default;
+
+// Banner
+$theme-banner-background-color: "base-lightest";
+$theme-banner-font-family: "ui";
+$theme-banner-link-color: default;
+$theme-banner-max-width: "desktop";
+
+// Breadcrumb
+$theme-breadcrumb-background-color: "default";
+$theme-breadcrumb-font-size: "sm";
+$theme-breadcrumb-font-family: "body";
+$theme-breadcrumb-link-color: default;
+$theme-breadcrumb-min-width: "mobile-lg";
+$theme-breadcrumb-padding-bottom: 2;
+$theme-breadcrumb-padding-top: 2;
+$theme-breadcrumb-padding-x: 0;
+$theme-breadcrumb-separator-color: "base";
+
+// Button
+$theme-button-font-family: "ui";
+$theme-button-border-radius: "md";
+$theme-button-small-width: 6;
+$theme-button-stroke-width: 2px;
+
+// Card
+$theme-card-border-color: "base-lighter";
+$theme-card-border-radius: "lg";
+$theme-card-border-width: 2px;
+$theme-card-gap: 2;
+$theme-card-flag-min-width: "tablet";
+$theme-card-flag-image-width: "card-lg";
+$theme-card-font-family: "body";
+$theme-card-header-typeset: "heading", "lg", 2;
+$theme-card-margin-bottom: 4;
+$theme-card-padding-perimeter: 3;
+$theme-card-padding-y: 2;
+
+// Collection
+$theme-collection-font-family: "ui";
+$theme-collection-header-typeset: "ui", "md", 3;
+
+// Footer
+$theme-footer-font-family: "body";
+$theme-footer-max-width: "desktop";
+
+// Form and input
+$theme-checkbox-border-radius: "sm";
+$theme-form-font-family: "ui";
+$theme-input-line-height: 3;
+$theme-input-max-width: "mobile-lg";
+$theme-input-select-border-width: 2px;
+$theme-input-select-size: 2.5;
+$theme-input-state-border-width: 0.5;
+$theme-input-tile-background-color-selected: "primary-lighter";
+$theme-input-tile-border-radius: "md";
+$theme-input-tile-border-width: 2px;
+$theme-input-tile-border-color: "base-lighter";
+$theme-input-tile-border-color-selected: "primary-light";
+
+// Header
+$theme-header-font-family: "ui";
+$theme-header-logo-text-width: 33%;
+$theme-header-max-width: "desktop";
+$theme-header-min-width: "desktop";
+
+// Hero
+$theme-hero-image: "#{$theme-image-path}/hero.png";
+
+// Identifier
+$theme-identifier-background-color: "base-darkest";
+$theme-identifier-font-family: "ui";
+$theme-identifier-identity-domain-color: "base-light";
+$theme-identifier-max-width: "desktop";
+$theme-identifier-primary-link-color: default;
+$theme-identifier-secondary-link-color: "base-light";
+
+// Process List
+$theme-process-list-counter-background-color: "white";
+$theme-process-list-counter-border-color: "ink";
+$theme-process-list-counter-border-width: 0.5;
+$theme-process-list-counter-font-family: "ui";
+$theme-process-list-counter-font-size: "lg";
+$theme-process-list-counter-gap-color: "white";
+$theme-process-list-counter-gap-width: 0.5;
+$theme-process-list-counter-size: 5;
+$theme-process-list-counter-text-color: "ink";
+$theme-process-list-connector-color: "primary-lighter";
+$theme-process-list-connector-width: 1;
+$theme-process-list-font-family: "ui";
+$theme-process-list-font-size: "sm";
+$theme-process-list-heading-color: "ink";
+$theme-process-list-heading-font-family: "ui";
+$theme-process-list-heading-font-size: "lg";
+
+// Navigation
+$theme-navigation-font-family: "ui";
+$theme-megamenu-columns: 3;
+
+// Search
+$theme-search-font-family: "ui";
+$theme-search-min-width: 27ch;
+
+// Sidenav
+$theme-sidenav-current-border-width: 0.5;
+$theme-sidenav-font-family: "ui";
+
+// Site Alert
+$theme-site-alert-max-width: "desktop";
+
+// Step indicator
+$step-indicator-background-color: "white";
+$theme-step-indicator-counter-gap: 0.5;
+$theme-step-indicator-counter-border-width: 0.5;
+$theme-step-indicator-font-family: "ui";
+$theme-step-indicator-heading-color: "ink";
+$theme-step-indicator-heading-font-family: "ui";
+$theme-step-indicator-heading-font-size: "lg";
+$theme-step-indicator-heading-font-size-small: "md";
+$theme-step-indicator-label-font-size: "sm";
+$theme-step-indicator-min-width: "tablet";
+$theme-step-indicator-segment-color-pending: "base-lighter";
+$theme-step-indicator-segment-color-complete: "primary-darker";
+$theme-step-indicator-segment-color-current: "primary";
+$theme-step-indicator-segment-gap: 2px;
+$theme-step-indicator-segment-height: 1;
+$theme-step-indicator-text-pending-color: "base-dark";
+
+// Summary box
+$theme-summary-box-background-color: "info-lighter";
+$theme-summary-box-border-color: "info-light";
+$theme-summary-box-border-width: 1px;
+$theme-summary-box-border-radius: "md";
+$theme-summary-box-font-family: "ui";
+$theme-summary-box-link-color: default;
+$theme-summary-box-text-color: default;
+
+// Table
+$theme-table-border-color: "ink";
+$theme-table-header-background-color: "base-lighter";
+$theme-table-header-text-color: "ink";
+$theme-table-stripe-background-color: "base-lightest";
+$theme-table-stripe-text-color: "ink";
+$theme-table-text-color: "ink";
+
+// Tooltips
+$theme-tooltip-background-color: "ink";
+$theme-tooltip-font-color: "base-lightest";
+$theme-tooltip-font-size: "xs";

client/src/styles/theme/_uswds-theme-custom-styles.scss

@@ -0,0 +1,21 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS THEME CUSTOM STYLES
+----------------------------------------
+!! Copy this file to your project's
+   sass root. Don't edit the version
+   in node_modules.
+----------------------------------------
+Custom project SASS goes here.
+
+i.e.
+@include u-padding-right('05');
+----------------------------------------
+*/

client/src/styles/theme/_uswds-theme-general.scss

@@ -0,0 +1,101 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+GENERAL SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS style tokens in the documentation:
+https://designsystem.digital.gov/design-tokens
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Image Path
+----------------------------------------
+Relative image file path
+----------------------------------------
+*/
+
+$theme-image-path: "../img";
+
+/*
+----------------------------------------
+Show compile warnings
+----------------------------------------
+Show Sass warnings when functions and
+mixins use non-standard tokens.
+AND
+Show updates and notifications.
+----------------------------------------
+*/
+
+$theme-show-compile-warnings: true;
+$theme-show-notifications: true;
+
+/*
+----------------------------------------
+Namespace
+----------------------------------------
+*/
+
+$theme-namespace: (
+  "grid": (
+    namespace: "grid-",
+    output: true,
+  ),
+  "utility": (
+    namespace: "u-",
+    output: false,
+  ),
+);
+
+/*
+----------------------------------------
+Layout grid
+----------------------------------------
+Should the layout grid classes output
+with !important
+----------------------------------------
+*/
+
+$theme-layout-grid-use-important: false !default;
+
+/*
+----------------------------------------
+Border box sizing
+----------------------------------------
+When set to true, sets the box-sizing
+property of all site elements to
+`border-box`.
+----------------------------------------
+*/
+
+$theme-global-border-box-sizing: true;
+
+/*
+----------------------------------------
+Focus styles
+----------------------------------------
+*/
+
+$theme-focus-color: "blue-40v";
+$theme-focus-offset: 0;
+$theme-focus-style: solid;
+$theme-focus-width: 0.5;
+
+/*
+----------------------------------------
+Icons
+----------------------------------------
+*/
+
+$theme-icon-image-size: 2;

client/src/styles/theme/_uswds-theme-spacing.scss

@@ -0,0 +1,93 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+SPACING SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS spacing units tokens in the
+documentation:
+https://designsystem.digital.gov/design-tokens/spacing-units
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Border radius
+----------------------------------------
+2px           2px
+0.5           4px
+1             8px
+1.5           12px
+2             16px
+2.5           20px
+3             24px
+4             32px
+5             40px
+6             48px
+7             56px
+8             64px
+9             72px
+----------------------------------------
+*/
+
+$theme-border-radius-sm: 2px;
+$theme-border-radius-md: 0.5;
+$theme-border-radius-lg: 1;
+
+/*
+----------------------------------------
+Column gap
+----------------------------------------
+2px         2px
+0.5         4px
+1           8px
+2           16px
+3           24px
+4           32px
+5           40px
+6           48px
+----------------------------------------
+*/
+
+$theme-column-gap-sm: 2px;
+$theme-column-gap-md: 2;
+$theme-column-gap-lg: 3;
+
+// These determine the responsive gap sizes set with .grid-gap
+$theme-column-gap-mobile: 2;
+$theme-column-gap-desktop: 4;
+
+/*
+----------------------------------------
+Grid container max-width
+----------------------------------------
+mobile
+mobile-lg
+tablet
+tablet-lg
+desktop
+desktop-lg
+widescreen
+----------------------------------------
+*/
+
+$theme-grid-container-max-width: "desktop";
+
+/*
+----------------------------------------
+Site
+----------------------------------------
+*/
+
+$theme-site-max-width: "desktop";
+$theme-site-margins-breakpoint: "desktop";
+$theme-site-margins-width: 4;
+$theme-site-margins-mobile-width: 2;

client/src/styles/theme/_uswds-theme-typography.scss

@@ -0,0 +1,422 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+TYPOGRAPHY SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS typography tokens in the documentation:
+https://designsystem.digital.gov/design-tokens/typesetting/font-family/
+----------------------------------------
+*/
+
+/*
+----------------------------------------
+Root font size
+----------------------------------------
+Setting $theme-respect-user-font-size to
+true sets the root font size to 100% and
+uses ems for media queries
+----------------------------------------
+$theme-root-font-size only applies when
+$theme-respect-user-font-size is set to
+false.
+
+This will set the root font size
+as a specific px value and use px values
+for media queries.
+
+Accepts true or false
+----------------------------------------
+*/
+
+$theme-respect-user-font-size: true;
+
+// $theme-root-font-size only applies when
+// $theme-respect-user-font-size is set to
+// false.
+
+// This will set the root font size
+// as a specific px value and use px values
+// for media queries.
+
+// Accepts values in px
+
+$theme-root-font-size: 10px;
+
+/*
+----------------------------------------
+Global styles
+----------------------------------------
+Adds basic styling for the following
+unclassed elements:
+
+- paragraph: paragraph text
+- link: links
+- content: paragraph text, links,
+  headings, lists, and tables
+----------------------------------------
+*/
+
+$theme-global-paragraph-styles: false;
+$theme-global-link-styles: false;
+$theme-global-content-styles: false;
+
+/*
+----------------------------------------
+Font path
+----------------------------------------
+Relative font file path
+----------------------------------------
+*/
+
+$theme-font-path: "../fonts";
+
+/*
+----------------------------------------
+Custom typeface tokens
+----------------------------------------
+Add a new custom typeface token if
+your project uses a typeface not already
+defined by USWDS.
+----------------------------------------
+USWDS defines the following tokens
+by default:
+----------------------------------------
+'georgia'
+'helvetica'
+'merriweather'
+'open-sans'
+'public-sans'
+'roboto-mono'
+'source-sans-pro'
+'system'
+'tahoma'
+'verdana'
+----------------------------------------
+Add as many new tokens as you have
+custom typefaces. Reference your new
+token(s) in the type-based font settings
+using the quoted name of the token.
+
+For example:
+
+$theme-font-type-cond: 'example-font-token';
+
+display-name:
+The display name of your font
+
+cap-height:
+The height of a 500px `N` in Sketch
+----------------------------------------
+You should change `example-[style]-token`
+names to something more descriptive.
+----------------------------------------
+*/
+
+$theme-typeface-tokens: (
+  example-serif-token: (
+    display-name: "Example Serif Display Name",
+    cap-height: 364px,
+  ),
+  example-sans-token: (
+    display-name: "Example Sans Display Name",
+    cap-height: 364px,
+  ),
+);
+
+/*
+----------------------------------------
+Type-based font settings
+----------------------------------------
+Set the type-based tokens for your
+project from the following tokens,
+or from any new font tokens you added in
+$theme-typeface-tokens.
+----------------------------------------
+'georgia'
+'helvetica'
+'merriweather'
+'open-sans'
+'public-sans'
+'roboto-mono'
+'source-sans-pro'
+'system'
+'tahoma'
+'verdana'
+----------------------------------------
+*/
+
+// condensed
+$theme-font-type-cond: false;
+
+// icon
+$theme-font-type-icon: false;
+
+// language-specific
+$theme-font-type-lang: false;
+
+// monospace
+$theme-font-type-mono: "roboto-mono";
+
+// sans-serif
+$theme-font-type-sans: "source-sans-pro";
+
+// serif
+$theme-font-type-serif: "merriweather";
+
+/*
+----------------------------------------
+Custom font stacks
+----------------------------------------
+Add custom font stacks to any of the
+type-based fonts. Any USWDS typeface
+token already has a default stack.
+
+Custom stacks don't need to include the
+font's display name. It will
+automatically appear at the start of
+the stack.
+----------------------------------------
+Example:
+$theme-font-type-sans: 'source-sans-pro';
+$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
+
+Output:
+font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
+----------------------------------------
+*/
+
+$theme-font-cond-custom-stack: false;
+$theme-font-icon-custom-stack: false;
+$theme-font-lang-custom-stack: false;
+$theme-font-mono-custom-stack: false;
+$theme-font-sans-custom-stack: false;
+$theme-font-serif-custom-stack: false;
+
+/*
+----------------------------------------
+Add any custom font source files
+----------------------------------------
+If you want USWDS to generate additional
+@font-face declarations, add your font
+data below, following the example that
+follows.
+----------------------------------------
+USWDS automatically generates @font-face
+decalarations for the following
+
+'merriweather'
+'public-sans'
+'roboto-mono'
+'source-sans-pro'
+
+These typefaces not require custom
+source files.
+----------------------------------------
+EXAMPLE
+
+- dir:
+  Directory relative to $theme-font-path
+- This directory should include fonts saved as
+  .ttf, .woff, and .woff2
+  ExampleSerif-Normal.ttf
+  ExampleSerif-Normal.woff
+  ExampleSerif-Normal.woff2
+
+$theme-font-serif-custom-src: (
+  dir: 'custom/example-serif',
+  roman: (
+    100: false,
+    200: false,
+    300: 'ExampleSerif-Light',
+    400: 'ExampleSerif-Normal',
+    500: false,
+    600: false,
+    700: 'ExampleSerif-Bold',
+    800: false,
+    900: false,
+  ),
+  italic: (
+    100: false,
+    200: false,
+    300: 'ExampleSerif-LightItalic',
+    400: 'ExampleSerif-Italic',
+    500: false,
+    600: false,
+    700: 'ExampleSerif-BoldItalic',
+    800: false,
+    900: false,
+  ),
+);
+----------------------------------------
+*/
+
+$theme-font-cond-custom-src: false;
+$theme-font-icon-custom-src: false;
+$theme-font-lang-custom-src: false;
+$theme-font-mono-custom-src: false;
+$theme-font-sans-custom-src: false;
+$theme-font-serif-custom-src: false;
+
+/*
+----------------------------------------
+Role-based font settings
+----------------------------------------
+Set the role-based tokens for your
+project from the following font-type
+tokens.
+----------------------------------------
+'cond'
+'icon'
+'lang'
+'mono'
+'sans'
+'serif'
+----------------------------------------
+*/
+
+$theme-font-role-ui: "sans";
+$theme-font-role-heading: "serif";
+$theme-font-role-body: "sans";
+$theme-font-role-code: "mono";
+$theme-font-role-alt: "serif";
+
+/*
+----------------------------------------
+Type scale
+----------------------------------------
+Define your project's type scale using
+values from the USWDS system type scale
+
+1-20
+----------------------------------------
+*/
+
+$theme-type-scale-3xs: 2;
+$theme-type-scale-2xs: 3;
+$theme-type-scale-xs: 4;
+$theme-type-scale-sm: 5;
+$theme-type-scale-md: 6;
+$theme-type-scale-lg: 9;
+$theme-type-scale-xl: 12;
+$theme-type-scale-2xl: 14;
+$theme-type-scale-3xl: 15;
+
+/*
+----------------------------------------
+Font weights
+----------------------------------------
+Assign weights 100-900
+Or use `false` for unneeded weights.
+----------------------------------------
+*/
+
+$theme-font-weight-thin: false;
+$theme-font-weight-light: 300;
+$theme-font-weight-normal: 400;
+$theme-font-weight-medium: false;
+$theme-font-weight-semibold: false;
+$theme-font-weight-bold: 700;
+$theme-font-weight-heavy: false;
+
+// If USWDS is generating your @font-face rules,
+// should we generate all available weights
+// regardless of the assignments above?
+
+$theme-generate-all-weights: false;
+
+/*
+----------------------------------------
+General typography settings
+----------------------------------------
+Type scale tokens
+----------------------------------------
+micro:      10px
+1:          12px
+2:          13px
+3:          14px
+4:          15px
+5:          16px
+6:          17px
+7:          18px
+8:          20px
+9:          22px
+10:         24px
+11:         28px
+12:         32px
+13:         36px
+14:         40px
+15:         48px
+16:         56px
+17:         64px
+18:         80px
+19:         120px
+20:         140px
+----------------------------------------
+Line height tokens
+----------------------------------------
+1:    1
+2:    1.15
+3:    1.35
+4:    1.5
+5:    1.62
+6:    1.75
+----------------------------------------
+Font role tokens
+----------------------------------------
+'ui'
+'heading'
+'body'
+'code'
+'alt'
+----------------------------------------
+Measure (max-width) tokens
+----------------------------------------
+1:       44ex
+2:       60ex
+3:       64ex
+4:       68ex
+5:       74ex
+6:       88ex
+none:    none
+----------------------------------------
+*/
+
+// Body settings are the equivalent of setting the <body> element
+$theme-body-font-family: "body";
+$theme-body-font-size: "sm";
+$theme-body-line-height: 5;
+
+// If true, explicitly style the <body> element with the base styles
+$theme-style-body-element: false;
+
+// Headings
+$theme-h1-font-size: "2xl";
+$theme-h2-font-size: "xl";
+$theme-h3-font-size: "lg";
+$theme-h4-font-size: "sm";
+$theme-h5-font-size: "xs";
+$theme-h6-font-size: "3xs";
+$theme-heading-line-height: 2;
+$theme-small-font-size: "2xs";
+$theme-display-font-size: "3xl";
+
+// Text and prose
+$theme-text-measure-narrow: 1;
+$theme-text-measure: 4;
+$theme-text-measure-wide: 6;
+$theme-prose-font-family: "body";
+
+// Lead text
+$theme-lead-font-family: "heading";
+$theme-lead-font-size: "lg";
+$theme-lead-line-height: 6;
+$theme-lead-measure: 6;

client/src/styles/theme/_uswds-theme-utilities.scss

@@ -0,0 +1,867 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS 2.10.3
+----------------------------------------
+UTILITIES SETTINGS
+----------------------------------------
+Read more about settings and
+USWDS utilities in the documentation:
+https://designsystem.digital.gov/utilities
+----------------------------------------
+*/
+
+$utilities-use-important: false;
+$output-all-utilities: true;
+
+/*
+----------------------------------------
+Utility breakpoints
+----------------------------------------
+Which breakpoints does your project
+need? Select as `true` any breakpoint
+used by utilities or layout grid
+----------------------------------------
+*/
+
+$theme-utility-breakpoints: (
+  // 160px:
+  "card": false,
+  // 240px:
+  "card-lg": false,
+  // 320px:
+  "mobile": false,
+  // 480px:
+  "mobile-lg": true,
+  // 640px:
+  "tablet": true,
+  // 800px:
+  "tablet-lg": false,
+  // 1024px:
+  "desktop": true,
+  // 1200px:
+  "desktop-lg": false,
+  // 1400px:
+  "widescreen": false
+);
+
+/*
+----------------------------------------
+Global colors
+----------------------------------------
+The following palettes will be added to
+- background-color
+- border-color
+- color
+- text-decoration-color
+----------------------------------------
+*/
+
+$global-color-palettes: ("palette-color-default");
+
+/*
+----------------------------------------
+Settings
+----------------------------------------
+*/
+
+$add-aspect-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$add-list-reset-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$align-items-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$align-self-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$background-color-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$border-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$border-color-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$border-radius-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$border-style-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$border-width-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$bottom-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$box-shadow-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$circle-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$clearfix-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$color-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$cursor-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$display-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$flex-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$flex-direction-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$flex-wrap-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$float-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$font-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$font-family-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$font-feature-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$font-style-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$font-weight-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$height-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$justify-content-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$left-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$letter-spacing-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$line-height-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$margin-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$max-height-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$max-width-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$measure-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$min-height-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$min-width-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$opacity-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$order-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$outline-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$outline-color-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$overflow-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$padding-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$pin-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$position-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$right-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$square-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$text-align-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$text-decoration-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$text-decoration-color-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: true,
+  visited: false,
+);
+
+$text-indent-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$text-transform-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$top-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$vertical-align-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$whitespace-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$width-settings: (
+  output: true,
+  responsive: true,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+$z-index-settings: (
+  output: true,
+  responsive: false,
+  active: false,
+  focus: false,
+  hover: false,
+  visited: false,
+);
+
+/*
+----------------------------------------
+Values
+----------------------------------------
+*/
+
+// .add-aspect
+
+$add-aspect-palettes: ();
+$add-aspect-manual-values: ();
+
+// .align-items
+
+$align-items-palettes: ("palette-align-items-default");
+$align-items-manual-values: ();
+
+// .align-self
+
+$align-self-palettes: ("palette-align-self-default");
+$align-self-manual-values: ();
+
+// .background-color
+
+$background-color-palettes: ();
+$background-color-manual-values: ();
+
+// .border
+
+$border-palettes: ("palette-border-default");
+$border-manual-values: ();
+
+// .border-color
+
+$border-color-palettes: ();
+$border-color-manual-values: ();
+
+// .border-radius
+
+$border-radius-palettes: ("palette-border-radius-default");
+$border-radius-manual-values: ();
+
+// .border-style
+
+$border-style-palettes: ("palette-border-style-default");
+$border-style-manual-values: ();
+
+// .border-width
+
+$border-width-palettes: ("palette-border-width-default");
+$border-width-manual-values: ();
+
+// .bottom
+
+$bottom-palettes: ("palette-bottom-default");
+
+$bottom-manual-values: ();
+
+// .box-shadow
+
+$box-shadow-palettes: ("palette-box-shadow-default");
+
+$box-shadow-manual-values: ();
+
+// .circle
+
+$circle-palettes: ("palette-circle-default");
+$circle-manual-values: ();
+
+// .color
+
+$color-palettes: ();
+$color-manual-values: ();
+
+// .cursor
+
+$cursor-palettes: ("palette-cursor-default");
+$cursor-manual-values: ();
+
+// .display
+
+$display-palettes: ("palette-display-default");
+$display-manual-values: ();
+
+// .flex
+
+$flex-palettes: ("palette-flex-default");
+$flex-manual-values: ();
+
+// .flex-direction
+
+$flex-direction-palettes: ("palette-flex-direction-default");
+$flex-direction-manual-values: ();
+
+// .flex-wrap
+
+$flex-wrap-palettes: ("palette-flex-wrap-default");
+$flex-wrap-manual-values: ();
+
+// .float
+
+$float-palettes: ("palette-float-default");
+$float-manual-values: ();
+
+// .font
+
+$font-palettes: ("palette-font-default");
+$font-manual-values: ();
+
+// .font-family
+
+$font-family-palettes: ("palette-font-family-default");
+$font-family-manual-values: ();
+
+// .font-feature-settings
+
+$font-feature-palettes: ("palette-font-feature-settings-default");
+$font-feature-manual-values: ();
+
+// .font-style
+
+$font-style-palettes: ("palette-font-style-default");
+$font-style-manual-values: ();
+
+// .font-weight
+
+$font-weight-palettes: ("palette-font-weight-default");
+$font-weight-manual-values: ();
+
+// .height
+
+$height-palettes: ("palette-height-default");
+$height-manual-values: ();
+
+// .justify-content
+
+$justify-content-palettes: ("palette-justify-content-default");
+$justify-content-manual-values: ();
+
+// .left
+
+$left-palettes: ("palette-left-default");
+$left-manual-values: ();
+
+// .letter-spacing
+
+$letter-spacing-palettes: ("palette-letter-spacing-default");
+$letter-spacing-manual-values: ();
+
+// .line-height
+
+$line-height-palettes: ("palette-line-height-default");
+$line-height-manual-values: ();
+
+// .margin
+
+$margin-palettes: ("palette-margin-default");
+$margin-manual-values: ();
+$margin-vertical-palettes: ("palette-margin-vertical-default");
+$margin-vertical-manual-values: ();
+$margin-horizontal-palettes: ("palette-margin-horizontal-default");
+$margin-horizontal-manual-values: ();
+
+// .max-height
+
+$max-height-palettes: ("palette-max-height-default");
+$max-height-manual-values: ();
+
+// .max-width
+
+$max-width-palettes: ("palette-max-width-default");
+$max-width-manual-values: ();
+
+// .measure
+
+$measure-palettes: ("palette-measure-default");
+$measure-manual-values: ();
+
+// .min-height
+
+$min-height-palettes: ("palette-min-height-default");
+$min-height-manual-values: ();
+
+// .min-width
+
+$min-width-palettes: ("palette-min-width-default");
+$min-width-manual-values: ();
+
+// .opacity
+
+$opacity-palettes: ("palette-opacity-default");
+$opacity-manual-values: ();
+
+// .order
+
+$order-palettes: ("palette-order-default");
+$order-manual-values: ();
+
+// .outline
+
+$outline-palettes: ("palette-outline-default");
+$outline-manual-values: ();
+
+// .outline-color
+
+$outline-color-palettes: ("palette-outline-color-default");
+$outline-color-manual-values: ();
+
+// .overflow
+
+$overflow-palettes: ("palette-overflow-default");
+$overflow-manual-values: ();
+
+// .padding
+
+$padding-palettes: ("palette-padding-default");
+$padding-manual-values: ();
+
+// .position
+
+$position-palettes: ("palette-position-default");
+$position-manual-values: ();
+
+// .right
+
+$right-palettes: ("palette-right-default");
+$right-manual-values: ();
+
+// .square
+
+$square-palettes: ("palette-square-default");
+$square-manual-values: ();
+
+// .text-align
+
+$text-align-palettes: ("palette-text-align-default");
+$text-align-manual-values: ();
+
+// .text-decoration
+
+$text-decoration-palettes: ("palette-text-decoration-default");
+$text-decoration-manual-values: ();
+
+// .text-decoration-color
+
+$text-decoration-color-palettes: ();
+$text-decoration-color-manual-values: ();
+
+// .text-indent
+
+$text-indent-palettes: ("palette-text-indent-default");
+$text-indent-manual-values: ();
+
+// .text-transform
+
+$text-transform-palettes: ("palette-text-transform-default");
+$text-transform-manual-values: ();
+
+// .top
+
+$top-palettes: ("palette-top-default");
+$top-manual-values: ();
+
+// .vertical-align
+
+$vertical-align-palettes: ("palette-vertical-align-default");
+$vertical-align-manual-values: ();
+
+// .white-space
+
+$whitespace-palettes: ("palette-white-space-default");
+$whitespace-manual-values: ();
+
+// .width
+
+$width-palettes: ("palette-width-default");
+$width-manual-values: ();
+
+// .z-index
+
+$z-index-palettes: ("palette-z-index-default");
+$z-index-manual-values: ();

client/src/styles/theme/styles.scss

@@ -0,0 +1,76 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+*/
+
+// -------------------------------------
+// Import individual theme settings
+
+@import "uswds-theme-general";
+@import "uswds-theme-typography";
+@import "uswds-theme-spacing";
+@import "uswds-theme-color";
+@import "uswds-theme-utilities";
+
+// components import needs to be last
+@import "uswds-theme-components";
+
+// -------------------------------------
+// Import individual USWDS packages...
+// See https://designsystem.digital.gov/components/
+
+// First import required and global packages...
+// @import 'packages/required';
+// @import 'packages/global';
+
+// Then import individual component packages...
+// @import 'packages/form-controls';
+// @import 'packages/form-templates';
+// @import 'packages/layout-grid';
+// @import 'packages/typography';
+// @import 'packages/validation';
+// @import 'packages/usa-accordion';
+// @import 'packages/usa-alert';
+// @import 'packages/usa-identifier';
+// @import 'packages/usa-banner';
+// @import 'packages/usa-breadcrumb';
+// @import 'packages/usa-button';
+// @import 'packages/usa-button-group';
+// @import 'packages/usa-card';
+// @import 'packages/usa-checklist';
+// @import 'packages/usa-footer';
+// @import 'packages/usa-header';
+// @import 'packages/usa-hero';
+// @import 'packages/usa-identifier';
+// @import 'packages/usa-layout';
+// @import 'packages/usa-media-block';
+// @import 'packages/usa-megamenu';
+// @import 'packages/usa-nav-container';
+// @import 'packages/usa-nav';
+// @import 'packages/usa-navbar';
+// @import 'packages/usa-search';
+// @import 'packages/usa-section';
+// @import 'packages/usa-sidenav';
+// @import 'packages/usa-skipnav';
+// @import 'packages/usa-step-indicator';
+// @import 'packages/usa-table';
+// @import 'packages/usa-tag';
+
+// or package sets...
+// @import 'packages/uswds-components';
+// @import 'packages/uswds-utilities';
+
+// -------------------------------------
+// ...or import the complete USWDS kit
+
+@import "uswds";
+
+// -------------------------------------
+// Import theme custom styles
+
+@import "uswds-theme-custom-styles";

client/src/styles/uswds-settings.scss

@@ -0,0 +1,29 @@
+// This setting file will instantiate styles that are needed for J40 from the styles/theme folder
+
+/*
+  Import the entire theme spacing folder
+*/
+@import "./theme/uswds-theme-spacing";
+
+/*
+ Selected general styles found in styles/theme/_uswds-theme-general.scss:
+*/
+$theme-image-path: "../../node_modules/uswds/src/img";
+$theme-show-compile-warnings: false;
+$theme-show-notifications: false;
+
+$theme-namespace: (
+  "grid": (
+    namespace: "grid-",
+    output: true,
+  ),
+  "utility": (
+    namespace: "u-",
+    output: true,
+  ),
+);
+
+/*
+Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
+*/
+$theme-font-path: "../../node_modules/uswds/src/fonts";