From 1b707cbc5c51e98be12a5569b5c8c97d15629ec7 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 9 Sep 2021 10:02:56 -0700 Subject: [PATCH] Adding consistent h and p tags (#639) * Revert "dockerize front end (#558)" This reverts commit 89c23faf7acb71e28d2bb3da4408e6346a0fea30. * 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 | 68 ++ client/src/components/AboutCard/AboutCard.tsx | 10 +- .../__snapshots__/AboutCard.test.tsx.snap | 13 +- .../AreaDetail/areaDetail.module.scss | 10 +- .../AreaDetail/areaDetail.module.scss.d.ts | 2 - client/src/components/AreaDetail/index.tsx | 16 +- .../__snapshots__/areaDetail.test.tsx.snap | 66 +- .../HowYouCanHelp/howYouCanHelp.module.scss | 5 - .../howYouCanHelp.module.scss.d.ts | 1 - client/src/components/HowYouCanHelp/index.tsx | 4 +- .../__snapshots__/howYouCanHelp.test.tsx.snap | 2 +- client/src/components/J40Footer.tsx | 8 +- client/src/components/J40Header.tsx | 6 +- .../src/components/J40MainGridContainer.tsx | 8 +- client/src/components/MapLegend/index.tsx | 2 +- .../MapLegend/mapLegend.module.scss | 5 +- .../MapLegend/mapLegend.module.scss.d.ts | 1 - .../__snapshots__/J40Footer.spec.tsx.snap | 14 +- client/src/data/constants.tsx | 2 +- client/src/pages/cejst.module.scss | 8 - client/src/pages/cejst.tsx | 56 +- client/src/pages/contact.tsx | 47 +- client/src/pages/index.test.tsx | 5 + client/src/pages/index.tsx | 29 +- client/src/pages/methodology.tsx | 10 +- client/src/pages/timeline.tsx | 15 +- client/src/styles/global.scss | 280 +++--- .../src/styles/theme/_uswds-theme-color.scss | 147 +++ .../styles/theme/_uswds-theme-components.scss | 181 ++++ .../theme/_uswds-theme-custom-styles.scss | 21 + .../styles/theme/_uswds-theme-general.scss | 101 ++ .../styles/theme/_uswds-theme-spacing.scss | 93 ++ .../styles/theme/_uswds-theme-typography.scss | 422 +++++++++ .../styles/theme/_uswds-theme-utilities.scss | 867 ++++++++++++++++++ client/src/styles/theme/styles.scss | 76 ++ client/src/styles/uswds-settings.scss | 29 + 36 files changed, 2344 insertions(+), 286 deletions(-) create mode 100644 client/DESIGN2DEV.md create mode 100644 client/src/styles/theme/_uswds-theme-color.scss create mode 100644 client/src/styles/theme/_uswds-theme-components.scss create mode 100644 client/src/styles/theme/_uswds-theme-custom-styles.scss create mode 100644 client/src/styles/theme/_uswds-theme-general.scss create mode 100644 client/src/styles/theme/_uswds-theme-spacing.scss create mode 100644 client/src/styles/theme/_uswds-theme-typography.scss create mode 100644 client/src/styles/theme/_uswds-theme-utilities.scss create mode 100644 client/src/styles/theme/styles.scss create mode 100644 client/src/styles/uswds-settings.scss diff --git a/client/DESIGN2DEV.md b/client/DESIGN2DEV.md new file mode 100644 index 00000000..d08f601a --- /dev/null +++ b/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. +- and

tags were defined using USWDS spacing, color, and typography tokens. +- Designs show and

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 \ No newline at end of file diff --git a/client/src/components/AboutCard/AboutCard.tsx b/client/src/components/AboutCard/AboutCard.tsx index 2fa073a5..45b4fa3b 100644 --- a/client/src/components/AboutCard/AboutCard.tsx +++ b/client/src/components/AboutCard/AboutCard.tsx @@ -28,8 +28,8 @@ const AboutCard = (props: React.PropsWithChildren) => { -

{props.header}

-
{props.children}
+

{props.header}

+

{props.children}

@@ -51,9 +51,9 @@ const AboutCard = (props: React.PropsWithChildren) => { -

{props.header}

-
{props.children}
-
+

{props.header}

+

{props.children}

+
{props.actionOpenInNewTab ? -

+

Test Header

-
+

Content body of the action card. -

+

{ }, 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) => {
{intl.formatMessage(messages.percentile)}
-
{intl.formatMessage(messages.categorization)}
+
{intl.formatMessage(messages.categorization)}
{categorization}
@@ -207,17 +207,17 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
-
{intl.formatMessage(messages.indicatorColumnHeader)}
-
{intl.formatMessage(messages.percentileColumnHeader)}
+
{intl.formatMessage(messages.indicatorColumnHeader)}
+
{intl.formatMessage(messages.percentileColumnHeader)}
{indicators.map((indicator, index) => (
  • -
    {indicator.label}
    -
    +

    {indicator.label}

    +

    {indicator.description} -

    +

    {readablePercentile(indicator.value)} diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index b15788b3..cfb9c1ca 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/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
    • -
    +
    Categorization -
    +
    @@ -67,23 +67,25 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
    -
    - INDICATORS -
    -
    - PERCENTILE (0-100) -
    +
    + Indicators +
    +
    + Percentile (0-100) +
  • -
    +

    Poverty -

    -
    + +

    Household income is less than or equal to twice the federal "poverty level" -

    +

    9900 @@ -98,12 +100,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 data-cy="indicatorBox" >
    -
    +

    Education -

    -
    + +

    Percent of people age 25 or older that didn’t get a high school diploma -

    +

    9800 @@ -118,12 +122,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 data-cy="indicatorBox" >
    -
    +

    Linguistic isolation -

    -
    + +

    Households in which all members speak a non-English language and speak English less than "very well" -

    +

    9700 @@ -138,12 +144,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 data-cy="indicatorBox" >
    -
    +

    Unemployment rate -

    -
    + +

    Number of unemployed people as a percentage of the labor force -

    +

    9600 @@ -158,12 +166,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 data-cy="indicatorBox" >
    -
    +

    Housing Burden -

    -
    + +

    Households that are low income and spend more than 30% of their income to housing costs -

    +

    9500 diff --git a/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss index babb35c7..a161a50e 100644 --- a/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss +++ b/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; diff --git a/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts index fac8ff61..a2f31b79 100644 --- a/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts +++ b/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; diff --git a/client/src/components/HowYouCanHelp/index.tsx b/client/src/components/HowYouCanHelp/index.tsx index eb190741..7a7b3156 100644 --- a/client/src/components/HowYouCanHelp/index.tsx +++ b/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 (
    -

    +

    {intl.formatMessage(messages.youCanHelpHeader)}

      diff --git a/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap b/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap index 31224311..52147d80 100644 --- a/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap +++ b/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

      - How You Can Help Improve the Tool + How you can help improve the tool

      • diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx index c4cc0b30..1ad0db18 100644 --- a/client/src/components/J40Footer.tsx +++ b/client/src/components/J40Footer.tsx @@ -73,6 +73,7 @@ const J40Footer = () => { [ intl.formatMessage(messages.moreinfoheader), { [ intl.formatMessage(messages.questionsheader), {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.
        • - + */} ); diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 253b626f..8088c60f 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -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.

        ,

        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.

          • not styled

            • */ .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); + } + } } diff --git a/client/src/styles/theme/_uswds-theme-color.scss b/client/src/styles/theme/_uswds-theme-color.scss new file mode 100644 index 00000000..584d3f34 --- /dev/null +++ b/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"; diff --git a/client/src/styles/theme/_uswds-theme-components.scss b/client/src/styles/theme/_uswds-theme-components.scss new file mode 100644 index 00000000..d2a06ac6 --- /dev/null +++ b/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"; diff --git a/client/src/styles/theme/_uswds-theme-custom-styles.scss b/client/src/styles/theme/_uswds-theme-custom-styles.scss new file mode 100644 index 00000000..7f6403c3 --- /dev/null +++ b/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'); +---------------------------------------- +*/ diff --git a/client/src/styles/theme/_uswds-theme-general.scss b/client/src/styles/theme/_uswds-theme-general.scss new file mode 100644 index 00000000..352d0fe2 --- /dev/null +++ b/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; diff --git a/client/src/styles/theme/_uswds-theme-spacing.scss b/client/src/styles/theme/_uswds-theme-spacing.scss new file mode 100644 index 00000000..14a28219 --- /dev/null +++ b/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; diff --git a/client/src/styles/theme/_uswds-theme-typography.scss b/client/src/styles/theme/_uswds-theme-typography.scss new file mode 100644 index 00000000..f0046858 --- /dev/null +++ b/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 element +$theme-body-font-family: "body"; +$theme-body-font-size: "sm"; +$theme-body-line-height: 5; + +// If true, explicitly style the 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; diff --git a/client/src/styles/theme/_uswds-theme-utilities.scss b/client/src/styles/theme/_uswds-theme-utilities.scss new file mode 100644 index 00000000..2ac74db2 --- /dev/null +++ b/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: (); diff --git a/client/src/styles/theme/styles.scss b/client/src/styles/theme/styles.scss new file mode 100644 index 00000000..b743cd19 --- /dev/null +++ b/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"; diff --git a/client/src/styles/uswds-settings.scss b/client/src/styles/uswds-settings.scss new file mode 100644 index 00000000..c6b73b54 --- /dev/null +++ b/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";