publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-21 09:11:26 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding consistent h and p tags (#639)

Browse source 
* 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
This commit is contained in:
Vim 2021-09-09 10:02:56 -07:00 • committed by GitHub
parent 327e27e713
commit 1b707cbc5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 2344 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
client/DESIGN2DEV.md Normal file
View file

@ -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

10
client/src/components/AboutCard/AboutCard.tsx
View file

@ -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>
<div className={'j40-section-body'}>{props.children}</div>
<h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
<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>
<div className={'j40-section-body'}>{props.children}</div>
<div className={'j40-section-footer'}>
<h3>{props.header}</h3>
<p>{props.children}</p>
<div className={'j40-aboutcard-sm-link'}>
{props.actionOpenInNewTab ?
<a
className={'j40-aboutcard-link'}

13
client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap
View file

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

10
client/src/components/AreaDetail/areaDetail.module.scss
View file

@ -108,8 +108,7 @@ $featureSelectBorderColor: #00bde3;
padding: 1rem;
}
.censusText,
.indicatorDescription {
.censusText {
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;

2
client/src/components/AreaDetail/areaDetail.module.scss.d.ts vendored
View file

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

16
client/src/components/AreaDetail/index.tsx
View file

@ -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>
<div>{intl.formatMessage(messages.percentileColumnHeader)}</div>
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
<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>
<div className={styles.indicatorDescription}>
<h4>{indicator.label}</h4>
<p className={'secondary'}>
{indicator.description}
</div>
</p>
</div>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}

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

@ -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>
INDICATORS
</div>
<div>
PERCENTILE (0-100)
</div>
<h6>
Indicators
</h6>
<h6>
Percentile (0-100)
</h6>
</div>
<li
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Poverty
</div>
<div>
</h4>
<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>
<div>
</h4>
<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>
<div>
</h4>
<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>
<div>
</h4>
<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>
<div>
</h4>
<p
class="secondary"
>
Households that are low income and spend more than 30% of their income to housing costs
</div>
</p>
</div>
<div>
9500

5
client/src/components/HowYouCanHelp/howYouCanHelp.module.scss
View file

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

1
client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts vendored
View file

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

4
client/src/components/HowYouCanHelp/index.tsx
View file

@ -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}>

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

@ -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>

8
client/src/components/J40Footer.tsx
View file

@ -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
className={'j40-footer-logo-heading'}>
{intl.formatMessage(messages.logotitle)}</p>}
heading={<h5>{intl.formatMessage(messages.logotitle)}</h5>}
/>
</J40MainGridContainer>
</div>

6
client/src/components/J40Header.tsx
View file

@ -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}

8
client/src/components/J40MainGridContainer.tsx
View file

@ -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>
);

2
client/src/components/MapLegend/index.tsx
View file

@ -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} />

5
client/src/components/MapLegend/mapLegend.module.scss
View file

@ -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;

1
client/src/components/MapLegend/mapLegend.module.scss.d.ts vendored
View file

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

14
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -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
class="j40-footer-logo-heading"
>
<h5>
Council on Environmental Quality
</p>
</h5>
</div>
</div>
</div>

2
client/src/data/constants.tsx
View file

@ -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',
},
});

8
client/src/pages/cejst.module.scss
View file

@ -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;

56
client/src/pages/cejst.tsx
View file

@ -24,39 +24,45 @@ const CEJSTPage = ({location}: IMapPageProps) => {
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer className={'j40-main-content'}>
<Grid row><Grid col>
<section>
<h1 className={styles.explorePageHeader}>Explore the tool</h1>
<div className={styles.explorePageSubHeader}>
<div className={styles.explorePageHeaderText}>
<p>
<J40MainGridContainer>
<Grid row className={'j40-mb-5'}>
<Grid col>
<section>
<h1 className={styles.explorePageHeader}>Explore the tool</h1>
<div className={styles.explorePageSubHeader}>
<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 />
</div>
</section>
</Grid></Grid>
</section>
</Grid>
</Grid>
<Grid row><Grid col>
<section>
<MapWrapper location={location}/>
</section>
</Grid></Grid>
<Grid row>
<Grid col>
<section>
<MapWrapper location={location}/>
</section>
</Grid>
</Grid>
<Grid row><Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid></Grid>
<Grid row>
<Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>);
};

47
client/src/pages/contact.tsx
View file

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

5
client/src/pages/index.test.tsx
View file

@ -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();

29
client/src/pages/index.tsx
View file

@ -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
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
<p>
<FormattedMessage
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
Read more about the Justice40 Initiative in President Biden’s
{presidentLink}
`}
values={{
presidentLink:
values={{
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
className={'j40-about-page'}>
<J40MainGridContainer>
<h2>How to get started</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}
@ -174,8 +175,8 @@ const IndexPage = ({location}: IndexPageProps) => {
</J40MainGridContainer>
</J40MainGridContainer>
<J40MainGridContainer
className={'j40-about-page'}>
<J40MainGridContainer>
<h2>Get involved</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}

10
client/src/pages/methodology.tsx
View file

@ -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>
<ScoreStepsList/>
</Grid></Grid>
<Grid row>
<Grid col>
<ScoreStepsList/>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>
);

15
client/src/pages/timeline.tsx
View file

@ -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'}>
<h1>Timeline</h1>
<section>
{/* <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>
);

280
client/src/styles/global.scss
View file

@ -1,47 +1,109 @@
/*
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";
// other CSS libraries:
@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 {
border-top: 0;
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
// 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") {
.j40-grid-container {
line-height: 1.5rem;
padding-right: 0;
}
h1 {
@include j40-element('3xl', 2, 'bold', 5 );
}
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
.j40-main-content {
@include at-media("mobile-lg") {
margin-bottom: 0;
margin-top: 2.5rem;
}
h1 {
font-size: 2.7rem;
}
h2 {
font-size: 1.46rem;
.footer-link-first-child{
display: inline-block;
@include u-margin-top(1.5)
}
}
// 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
.usa-prose {
h1,
h2,
h3,
h4 {
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial,
sans-serif;
}
- alert
- map
- timeline
- about
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);
}
}
}

147
client/src/styles/theme/_uswds-theme-color.scss Normal file
View file

@ -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";

181
client/src/styles/theme/_uswds-theme-components.scss Normal file
View file

@ -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";

21
client/src/styles/theme/_uswds-theme-custom-styles.scss Normal file
View file

@ -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');
----------------------------------------
*/

101
client/src/styles/theme/_uswds-theme-general.scss Normal file
View file

@ -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;

93
client/src/styles/theme/_uswds-theme-spacing.scss Normal file
View file

@ -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;

422
client/src/styles/theme/_uswds-theme-typography.scss Normal file
View file

@ -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;

867
client/src/styles/theme/_uswds-theme-utilities.scss Normal file
View file

@ -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: ();

76
client/src/styles/theme/styles.scss Normal file
View file

@ -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";

29
client/src/styles/uswds-settings.scss Normal file
View file

@ -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";