NCI Custom Settings

The NCIDS is built utilizing the United States Web Design System (USWDS)'s customizable settings. This page will document the settings that have been changed to suit the NCIDS.

Introduction to USWDS Settings

USWDS is built using a suite of customizable settings that allows you to configure the Design System to fit your project’s needs. These settings are Sass variables that begin with the $theme- prefix and are typically defined with USWDS design tokens. You can find the full list of USWDS settings and their default values in the USWDS settings tables.

NCI's Changes to USWDS Setting Tokens

Breakpoint Changes

The NCIDS enables the widescreen breakpoint for responsive behavior at larger (>1400px) screenspaces.

General Color Changes

Token	Change
`'$theme-color-primary-family'`	`'cerulean-50' to 'cerulean-60'`
`'$theme-color-secondary-family'`	`'navy-60' to 'navy-70'`
`'$theme-color-accent-warm-family'`	`'navy-70' to 'navy-90'`
`'$theme-color-accent-cool-family'`	`'teal-60' to 'teal-70'`

More Specific Color Changes

Token	Change	Visualization	Value Change
`'$theme-color-error-family'`	`'red-warm' to 'cranberry'`
`'$theme-color-warning-family'`	`'gold' to 'golden'`
`'$theme-color-success-family'`	`'green-cool' to 'teal'`
`'$theme-color-info-family'`	`'cyan' to 'cerulean'`
`'$theme-color-emergency'`	`'red-warm-60v' to 'cranberry-60v'`	-	`#9c3d10 to #b60d43`
`'$theme-color-emergency-dark'`	`'red-warm-80' to 'cranberry-80'`	-	`#332d29 to #700824`
`'$theme-link-color'`	`'primary' to 'cerulean-60v'`	-	`#007bbd to #01679d`

Shadow Changes

Shadow Token	CSS Values (Old to New)	Visualization
`'shadow-none'`	`'none'`	Shadow None (No Change)
`'shadow-1'`	`'box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1)'` `'box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3)'`	Old Shadow 1 New Shadow 1
`'shadow-2'`	`'box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1)'` `'box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3)'`	Old Shadow 2 New Shadow 2
`'shadow-3'`	`'box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1)'` `'box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3)'`	Old Shadow 3 New Shadow 3
`'shadow-4'`	`'box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1)'` `'box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.3)'`	Old Shadow 4 New Shadow 4
`'shadow-5'`	`'box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.1)'` `'box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.3)'`	Old Shadow 5 New Shadow 5

Font Changes

Token	Change	Value Change
`'$theme-type-scale-xs'`	`'4' to '5'`	`~15px to ~16px`
`'$theme-type-scale-sm'`	`'5' to '7'`	`~16px to ~18px`
`'$theme-type-scale-md'`	`'6' to '8'`	`~17px to ~20px`
`'$theme-type-scale-xl'`	`'12' to '10'`	`~32px to ~24px`
`'$theme-type-scale-2xl'`	`'14' to '11'`	`~40px to ~28px`
`'$theme-type-scale-3xl'`	`'15' to '12'`	`~48px to ~32px`
`'$theme-font-weight-semibold'`	`'600' to 'false'`	`Disables semibold`
`'$theme-font-weight-bold'`	`'700' to '600'`	`Bold font-weight changes from 700 to 600`
`'$theme-h4-font-size'`	`'sm' to 'md'`	`~18px to ~20px`
`'$theme-h5-font-size'`	`'xs' to 'sm'`	`~16px to ~18px`
`'$theme-h6-font-size'`	`'3xs' to 'xs'`	`~12px to ~16px`

NCIDS Import of USWDS

@use "uswds-core" with (
    $theme-image-path: "@nciocpl/ncids-css/uswds-img",
    $theme-show-notifications: false,
    $theme-show-compile-warnings: false,
    $theme-utility-breakpoints: (
        "card": false,
        "card-lg": false,
        "mobile": false,
        "mobile-lg": true,
        "tablet": true,
        "tablet-lg": true,
        "desktop": true,
        "desktop-lg": false,
        "widescreen": true
    )
);