NCIDS Utility - NCIOCPL/ncids GitHub Wiki
Sass variable | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
$theme-color-base-lightest | gray-5 | #f0f0f0 | ||
$theme-color-base-lighter | gray-cool-10 | #dfe1e2 | ||
$theme-color-base-light | gray-cool-30 | #a9aeb1 | ||
$theme-color-base | gray-cool-50 | #71767a | ||
$theme-color-base-dark | gray-cool-60 | #565c65 | ||
$theme-color-base-darker | gray-cool-70 | #3d4551 | ||
$theme-color-base-darkest | gray-90 | #1b1b1b | ||
$theme-color-ink | gray-90 | #1b1b1b | ||
$theme-color-primary-family | blue | cerulean | ||
$theme-color-primary-lightest | false | |||
$theme-color-primary-lighter | blue-10 | #d9e8f6 | cerulean-20 | #99cae4 |
$theme-color-primary-light | blue-30 | #73b3e7 | cerulean-40 | #3395ca |
$theme-color-primary | blue-60v | #005ea2 | cerulean-50 | #007bbd |
$theme-color-primary-vivid | blue-warm-60v | #0050d8 | cerulean-50v | #067cbc |
$theme-color-primary-dark | blue-warm-70v | #1a4480 | cerulean-70 | #004e7a |
$theme-color-primary-darker | blue-warm-80v | #162e51 | cerulean-80 | #003a57 |
$theme-color-primary-darkest | false | |||
$theme-color-secondary-family | red | teal | ||
$theme-color-secondary-lightest | false | |||
$theme-color-secondary-lighter | red-cool-10 | #f3e1e4 | teal-10 | #beebee |
$theme-color-secondary-light | red-30 | #f2938c | teal-30 | #4bbfc6 |
$theme-color-secondary | red-50 | #d83933 | teal-50 | #298085 |
$theme-color-secondary-vivid | red-cool-50v | #e41d3d | teal-50v | #338084 |
$theme-color-secondary-dark | red-60v | #b50909 | teal-70 | #1e4c4f |
$theme-color-secondary-darker | red-70v | #8b0a03 | teal-80 | #17373a |
$theme-color-secondary-darkest | false | |||
$theme-color-accent-warm-family | orange | golden | ||
$theme-color-accent-warm-lightest | false | |||
$theme-color-accent-warm-lighter | orange-10 | #f2e4d4 | golden-5 | #fdf2bf |
$theme-color-accent-warm-light | orange-20v | #ffbc78 | golden-10 | #fee685 |
$theme-color-accent-warm | orange-30v | #fa9441 | golden-20 | #face00 |
$theme-color-accent-warm-dark | orange-50v | #c05600 | golden-30 | #ddaa01 |
$theme-color-accent-warm-darker | orange-60 | #775540 | golden-40 | #b38c00 |
$theme-color-accent-warm-darkest | false | |||
$theme-color-accent-cool-family | blue-cool | navy | ||
$theme-color-accent-cool-lightest | false | |||
$theme-color-accent-cool-lighter | blue-cool-5v | #e1f3f8 | navy-10 | #d7e5f4 |
$theme-color-accent-cool-light | blue-cool-20v | #97d4ea | navy-30 | #92a9c8 |
$theme-color-accent-cool | cyan-30v | #00bde3 | navy-50 | #5478ab |
$theme-color-accent-cool-dark | blue-cool-40v | #28a0cb | navy-70 | #284976 |
$theme-color-accent-cool-darker | blue-cool-60v | #07648d | navy-90 | #06162d |
$theme-color-accent-cool-darkest | false |
Sass variable | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
$theme-color-error-family | red-warm | cranberry | ||
$theme-color-error-lighter | red-warm-10 | #f4e3db | cranberry-10 | #fde2ea |
$theme-color-error-light | red-warm-30v | #f39268 | cranberry-30v | #f27da2 |
$theme-color-error | red-warm-50v | #d54309 | cranberry-50v | #e41154 |
$theme-color-error-dark | red-60v | #b50909 | cranberry-60v | #b60d43 |
$theme-color-error-darker | red-70 | #6f3331 | cranberry-70 | #950b30 |
$theme-color-warning-family | gold | golden | ||
$theme-color-warning-lighter | yellow-5 | #faf3d1 | golden-5 | #fdf2bf |
$theme-color-warning-light | yellow-10v | #fee685 | golden-10v | #ffe396 |
$theme-color-warning | gold-20v | #ffbe2e | golden-20v | #ffbe2e |
$theme-color-warning-dark | gold-30v | #e5a000 | golden-30v | #e5a000 |
$theme-color-warning-darker | gold-50v | #936f38 | golden-50v | #936f38 |
$theme-color-success-family | green-cool | teal | ||
$theme-color-success-lighter | green-cool-5 | #ecf3ec | teal-5 | #dbf2f3 |
$theme-color-success-light | green-cool-20v | #70e17 | teal-20v | #67e4e8 |
$theme-color-success | green-cool-40v | #00a91c | teal-40v | #42979a |
$theme-color-success-dark | green-cool-50v | #008817 | teal-50v | #338084 |
$theme-color-success-darker | green-cool-60v | #216e1f | teal-60v | #206b6f |
$theme-color-success-family | cyan | cerulean | ||
$theme-color-info-lighter | cyan-5 | #e7f6f8 | cerulean-10 | #d4e7f2 |
$theme-color-info-light | cyan-20 | #99deea | cerulean-20 | #99cae4 |
$theme-color-info | cyan-30v | #00bde3 | cerulean-30v | #51b8f0 |
$theme-color-info-dark | cyan-40v | #009ec1 | cerulean-40v | #2099df |
$theme-color-info-darker | blue-cool-60 | #2e6276 | cerulean-60v | #01679d |
$theme-color-disabled-family | gray | |||
$theme-color-disabled-light | gray-10 | #e6e6e6 | ||
$theme-color-disabled | gray-20 | #c9c9c9 | ||
$theme-color-disabled-dark | gray-30 | #adadad | ||
$theme-color-emergency-family | doesn't exist but it's the only outlier. | |||
$theme-color-emergency | red-warm-60v | #9c3d10 | cranberry-60v | #b60d43 |
$theme-color-emergency-dark | red-warm-80 | #332d29 | cranberry-80 | #700824 |
Sass variable | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
$theme-link-color | primary | #007bbd | cerulean-60v | #01679d |
$theme-link-visited-color | violet-70v | #54278f | ||
$theme-link-hover-color | primary-dark | #1a4480 | cerulean-70 | #004971 |
$theme-link-active-color | primary-darker | #162e51 | cerulean-80 | #00314b |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-grid-container-max-width | desktop | widescreen |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-font-type-sans | source-sans-pro | open-sans |
$theme-font-type-serif | merriweather | poppins |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-type-scale-3xs | 2 | |
$theme-type-scale-2xs | 3 | |
$theme-type-scale-xs | 4 | 5 |
$theme-type-scale-sm | 5 | 7 |
$theme-type-scale-md | 6 | |
$theme-type-scale-lg | 9 | |
$theme-type-scale-xl | 12 | 10 |
$theme-type-scale-2xl | 14 | 11 |
$theme-type-scale-3xl | 15 | 12 |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-display-font-size | 3xl | |
$theme-h1-font-size | 2xl | |
$theme-h2-font-size | xl | |
$theme-h3-font-size | lg | |
$theme-h4-font-size | sm | md |
$theme-h5-font-size | xs | sm |
$theme-h6-font-size | 3xs | xs |
$theme-heading-line-height | 2 |
Developer notes
Theme font size values are not currently changed from USWDS. These are added with the expectation they will change.
$theme-small-font-size: "2xs" !default;
exists in the settings file, but not currently attached to any code; therefore, is excluded in this list.
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-body-font-family | body | |
$theme-body-font-size | sm | xs |
$theme-body-line-height | 5 |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-lead-font-family | heading | body |
$theme-lead-font-size | lg | |
$theme-lead-line-height | 6 | 4 |
$theme-lead-measure | 6 |
Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-text-measure-narrow | 1 | |
$theme-text-measure | 4 | 6 |
$theme-text-measure-wide | 6 |
Developer notes
`$theme-text-measure` and `$theme-text-measure-wide` should not be the same. Consider changing this.Sass variable | USWDS default | NCIDS change |
---|---|---|
$theme-font-weight-normal | 400 | |
$theme-font-weight-medium | false | |
$theme-font-weight-semibold | false | |
$theme-font-weight-bold | 700 | 600 |
$theme-font-weight-heavy | false |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.text-transparent | transparent | |||
.text-black | black | |||
.text-white | white |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.text-teal | teal-50 | #298085 | ||
.text-cerulean | cerulean-50 | #007bbd | ||
.text-cranberry | cranberry-60 | #bb0e3d | ||
.text-navy | navy-80 | #14315c | ||
.text-golden | golden-50 | #947100 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.text-gray-5 | gray-5 | #f0f0f0 | ||
.text-gray-10 | gray-10 | #e6e6e6 | ||
.text-gray-30 | gray-30 | #adadad | ||
.text-gray-50 | gray-50 | #757575 | ||
.text-gray-70 | gray-70 | #454545 | ||
.text-gray-90 | gray-90 | #1b1b1b |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.text-base-lightest | gray-5 | #f0f0f0 | ||
.text-base-lighter | gray-cool-10 | #dfe1e2 | ||
.text-base-light | gray-cool-30 | #a9aeb1 | ||
.text-base | gray-cool-50 | #71767a | ||
.text-base-dark | gray-cool-60 | #565c65 | ||
.text-base-darker | gray-cool-70 | #3d4551 | ||
.text-base-darkest | gray-90 | #1b1b1b | ||
.text-ink | gray-90 | #1b1b1b | ||
.text-primary-lightest | false | |||
.text-primary-lighter | blue-10 | #d9e8f6 | cerulean-20 | #99cae4 |
.text-primary-light | blue-30 | #73b3e7 | cerulean-40 | #3395ca |
.text-primary | blue-60v | #005ea2 | cerulean-50 | #007bbd |
.text-primary-vivid | blue-warm-60v | #0050d8 | cerulean-50v | #067cbc |
.text-primary-dark | blue-warm-70v | #1a4480 | cerulean-70 | #004e7a |
.text-primary-darker | blue-warm-80v | #162e51 | cerulean-80 | #003a57 |
.text-primary-darkest | false | |||
.text-secondary-lightest | false | |||
.text-secondary-lighter | red-cool-10 | #f3e1e4 | teal-10 | #beebee |
.text-secondary-light | red-30 | #f2938c | teal-30 | #4bbfc6 |
.text-secondary | red-50 | #d83933 | teal-50 | #298085 |
.text-secondary-vivid | red-cool-50v | #e41d3d | teal-50v | #338084 |
.text-secondary-dark | red-60v | #b50909 | teal-70 | #1e4c4f |
.text-secondary-darker | red-70v | #8b0a03 | teal-80 | #17373a |
.text-secondary-darkest | false | |||
.text-accent-warm-lightest | false | |||
.text-accent-warm-lighter | orange-10 | #f2e4d4 | golden-5 | #fdf2bf |
.text-accent-warm-light | orange-20v | #ffbc78 | golden-10 | #fee685 |
.text-accent-warm | orange-30v | #fa9441 | golden-20 | #face00 |
.text-accent-warm-dark | orange-50v | #c05600 | golden-30 | #ddaa01 |
.text-accent-warm-darker | orange-60 | #775540 | golden-40 | #b38c00 |
.text-accent-warm-darkest | false | |||
.text-accent-cool-lightest | false | |||
.text-accent-cool-lighter | blue-cool-5v | #e1f3f8 | navy-10 | #d7e5f4 |
.text-accent-cool-light | blue-cool-20v | #97d4ea | navy-30 | #92a9c8 |
.text-accent-cool | cyan-30v | #00bde3 | navy-50 | #5478ab |
.text-accent-cool-dark | blue-cool-40v | #28a0cb | navy-70 | #284976 |
.text-accent-cool-darker | blue-cool-60v | #07648d | navy-90 | #06162d |
.text-accent-cool-darkest | false |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.text-error-lighter | red-warm-10 | #f4e3db | cranberry-10 | #fde2ea |
.text-error-light | red-warm-30v | #f39268 | cranberry-30v | #f27da2 |
.text-error | red-warm-50v | #d54309 | cranberry-50v | #e41154 |
.text-error-dark | red-60v | #b50909 | cranberry-60v | #b60d43 |
.text-error-darker | red-70 | #6f3331 | cranberry-70 | #950b30 |
.text-warning-lighter | yellow-5 | #faf3d1 | golden-5 | #fdf2bf |
.text-warning-light | yellow-10v | #fee685 | golden-10v | #ffe396 |
.text-warning | gold-20v | #ffbe2e | golden-20v | #ffbe2e |
.text-warning-dark | gold-30v | #e5a000 | golden-30v | #e5a000 |
.text-warning-darker | gold-50v | #936f38 | golden-50v | #936f38 |
.text-success-lighter | green-cool-5 | #ecf3ec | teal-5 | #dbf2f3 |
.text-success-light | green-cool-20v | #70e17 | teal-20v | #67e4e8 |
.text-success | green-cool-40v | #00a91c | teal-40v | #42979a |
.text-success-dark | green-cool-50v | #008817 | teal-50v | #338084 |
.text-success-darker | green-cool-60v | #216e1f | teal-60v | #206b6f |
.text-info-lighter | cyan-5 | #e7f6f8 | cerulean-10 | #d4e7f2 |
.text-info-light | cyan-20 | #99deea | cerulean-20 | #99cae4 |
.text-info | cyan-30v | #00bde3 | cerulean-30v | #51b8f0 |
.text-info-dark | cyan-40v | #009ec1 | cerulean-40v | #2099df |
.text-info-darker | blue-cool-60 | #2e6276 | cerulean-60v | #01679d |
.text-disabled-light | gray-10 | #e6e6e6 | ||
.text-disabled | gray-20 | #c9c9c9 | ||
.text-disabled-dark | gray-30 | #adadad | ||
.text-emergency | red-warm-60v | #9c3d10 | cranberry-60v | #b60d43 |
.text-emergency-dark | red-warm-80 | #332d29 | cranberry-80 | #700824 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.bg-transparent | transparent | |||
.bg-black | black | |||
.bg-white | white |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.bg-teal | teal-50 | #298085 | ||
.bg-cerulean | cerulean-50 | #007bbd | ||
.bg-cranberry | cranberry-60 | #bb0e3d | ||
.bg-navy | navy-80 | #14315c | ||
.bg-golden | golden-50 | #947100 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.bg-gray-5 | gray-5 | #f0f0f0 | ||
.bg-gray-10 | gray-10 | #e6e6e6 | ||
.bg-gray-30 | gray-30 | #adadad | ||
.bg-gray-50 | gray-50 | #757575 | ||
.bg-gray-70 | gray-70 | #454545 | ||
.bg-gray-90 | gray-90 | #1b1b1b |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.bg-base-lightest | gray-5 | #f0f0f0 | ||
.bg-base-lighter | gray-cool-10 | #dfe1e2 | ||
.bg-base-light | gray-cool-30 | #a9aeb1 | ||
.bg-base | gray-cool-50 | #71767a | ||
.bg-base-dark | gray-cool-60 | #565c65 | ||
.bg-base-darker | gray-cool-70 | #3d4551 | ||
.bg-base-darkest | gray-90 | #1b1b1b | ||
.bg-ink | gray-90 | #1b1b1b | ||
.bg-primary-lightest | false | |||
.bg-primary-lighter | blue-10 | #d9e8f6 | cerulean-20 | #99cae4 |
.bg-primary-light | blue-30 | #73b3e7 | cerulean-40 | #3395ca |
.bg-primary | blue-60v | #005ea2 | cerulean-50 | #007bbd |
.bg-primary-vivid | blue-warm-60v | #0050d8 | cerulean-50v | #067cbc |
.bg-primary-dark | blue-warm-70v | #1a4480 | cerulean-70 | #004e7a |
.bg-primary-darker | blue-warm-80v | #162e51 | cerulean-80 | #003a57 |
.bg-primary-darkest | false | |||
.bg-secondary-lightest | false | |||
.bg-secondary-lighter | red-cool-10 | #f3e1e4 | teal-10 | #beebee |
.bg-secondary-light | red-30 | #f2938c | teal-30 | #4bbfc6 |
.bg-secondary | red-50 | #d83933 | teal-50 | #298085 |
.bg-secondary-vivid | red-cool-50v | #e41d3d | teal-50v | #338084 |
.bg-secondary-dark | red-60v | #b50909 | teal-70 | #1e4c4f |
.bg-secondary-darker | red-70v | #8b0a03 | teal-80 | #17373a |
.bg-secondary-darkest | false | |||
.bg-accent-warm-lightest | false | |||
.bg-accent-warm-lighter | orange-10 | #f2e4d4 | golden-5 | #fdf2bf |
.bg-accent-warm-light | orange-20v | #ffbc78 | golden-10 | #fee685 |
.bg-accent-warm | orange-30v | #fa9441 | golden-20 | #face00 |
.bg-accent-warm-dark | orange-50v | #c05600 | golden-30 | #ddaa01 |
.bg-accent-warm-darker | orange-60 | #775540 | golden-40 | #b38c00 |
.bg-accent-warm-darkest | false | |||
.bg-accent-cool-lightest | false | |||
.bg-accent-cool-lighter | blue-cool-5v | #e1f3f8 | navy-10 | #d7e5f4 |
.bg-accent-cool-light | blue-cool-20v | #97d4ea | navy-30 | #92a9c8 |
.bg-accent-cool | cyan-30v | #00bde3 | navy-50 | #5478ab |
.bg-accent-cool-dark | blue-cool-40v | #28a0cb | navy-70 | #284976 |
.bg-accent-cool-darker | blue-cool-60v | #07648d | navy-90 | #06162d |
.bg-accent-cool-darkest | false |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.bg-error-lighter | red-warm-10 | #f4e3db | cranberry-10 | #fde2ea |
.bg-error-light | red-warm-30v | #f39268 | cranberry-30v | #f27da2 |
.bg-error | red-warm-50v | #d54309 | cranberry-50v | #e41154 |
.bg-error-dark | red-60v | #b50909 | cranberry-60v | #b60d43 |
.bg-error-darker | red-70 | #6f3331 | cranberry-70 | #950b30 |
.bg-warning-lighter | yellow-5 | #faf3d1 | golden-5 | #fdf2bf |
.bg-warning-light | yellow-10v | #fee685 | golden-10v | #ffe396 |
.bg-warning | gold-20v | #ffbe2e | golden-20v | #ffbe2e |
.bg-warning-dark | gold-30v | #e5a000 | golden-30v | #e5a000 |
.bg-warning-darker | gold-50v | #936f38 | golden-50v | #936f38 |
.bg-success-lighter | green-cool-5 | #ecf3ec | teal-5 | #dbf2f3 |
.bg-success-light | green-cool-20v | #70e17 | teal-20v | #67e4e8 |
.bg-success | green-cool-40v | #00a91c | teal-40v | #42979a |
.bg-success-dark | green-cool-50v | #008817 | teal-50v | #338084 |
.bg-success-darker | green-cool-60v | #216e1f | teal-60v | #206b6f |
.bg-info-lighter | cyan-5 | #e7f6f8 | cerulean-10 | #d4e7f2 |
.bg-info-light | cyan-20 | #99deea | cerulean-20 | #99cae4 |
.bg-info | cyan-30v | #00bde3 | cerulean-30v | #51b8f0 |
.bg-info-dark | cyan-40v | #009ec1 | cerulean-40v | #2099df |
.bg-info-darker | blue-cool-60 | #2e6276 | cerulean-60v | #01679d |
.bg-disabled-light | gray-10 | #e6e6e6 | ||
.bg-disabled | gray-20 | #c9c9c9 | ||
.bg-disabled-dark | gray-30 | #adadad | ||
.bg-emergency | red-warm-60v | #9c3d10 | cranberry-60v | #b60d43 |
.bg-emergency-dark | red-warm-80 | #332d29 | cranberry-80 | #700824 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.border-transparent | transparent | |||
.border-black | black | |||
.border-white | white |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.border-teal | teal-50 | #298085 | ||
.border-cerulean | cerulean-50 | #007bbd | ||
.border-cranberry | cranberry-60 | #bb0e3d | ||
.border-navy | navy-80 | #14315c | ||
.border-golden | golden-50 | #947100 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.border-gray-5 | gray-5 | #f0f0f0 | ||
.border-gray-10 | gray-10 | #e6e6e6 | ||
.border-gray-30 | gray-30 | #adadad | ||
.border-gray-50 | gray-50 | #757575 | ||
.border-gray-70 | gray-70 | #454545 | ||
.border-gray-90 | gray-90 | #1b1b1b |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.border-base-lightest | gray-5 | #f0f0f0 | ||
.border-base-lighter | gray-cool-10 | #dfe1e2 | ||
.border-base-light | gray-cool-30 | #a9aeb1 | ||
.border-base | gray-cool-50 | #71767a | ||
.border-base-dark | gray-cool-60 | #565c65 | ||
.border-base-darker | gray-cool-70 | #3d4551 | ||
.border-base-darkest | gray-90 | #1b1b1b | ||
.border-ink | gray-90 | #1b1b1b | ||
.border-primary-lightest | false | |||
.border-primary-lighter | blue-10 | #d9e8f6 | cerulean-20 | #99cae4 |
.border-primary-light | blue-30 | #73b3e7 | cerulean-40 | #3395ca |
.border-primary | blue-60v | #005ea2 | cerulean-50 | #007bbd |
.border-primary-vivid | blue-warm-60v | #0050d8 | cerulean-50v | #067cbc |
.border-primary-dark | blue-warm-70v | #1a4480 | cerulean-70 | #004e7a |
.border-primary-darker | blue-warm-80v | #162e51 | cerulean-80 | #003a57 |
.border-primary-darkest | false | |||
.border-secondary-lightest | false | |||
.border-secondary-lighter | red-cool-10 | #f3e1e4 | teal-10 | #beebee |
.border-secondary-light | red-30 | #f2938c | teal-30 | #4bbfc6 |
.border-secondary | red-50 | #d83933 | teal-50 | #298085 |
.border-secondary-vivid | red-cool-50v | #e41d3d | teal-50v | #338084 |
.border-secondary-dark | red-60v | #b50909 | teal-70 | #1e4c4f |
.border-secondary-darker | red-70v | #8b0a03 | teal-80 | #17373a |
.border-secondary-darkest | false | |||
.border-accent-warm-lightest | false | |||
.border-accent-warm-lighter | orange-10 | #f2e4d4 | golden-5 | #fdf2bf |
.border-accent-warm-light | orange-20v | #ffbc78 | golden-10 | #fee685 |
.border-accent-warm | orange-30v | #fa9441 | golden-20 | #face00 |
.border-accent-warm-dark | orange-50v | #c05600 | golden-30 | #ddaa01 |
.border-accent-warm-darker | orange-60 | #775540 | golden-40 | #b38c00 |
.border-accent-warm-darkest | false | |||
.border-accent-cool-lightest | false | |||
.border-accent-cool-lighter | blue-cool-5v | #e1f3f8 | navy-10 | #d7e5f4 |
.border-accent-cool-light | blue-cool-20v | #97d4ea | navy-30 | #92a9c8 |
.border-accent-cool | cyan-30v | #00bde3 | navy-50 | #5478ab |
.border-accent-cool-dark | blue-cool-40v | #28a0cb | navy-70 | #284976 |
.border-accent-cool-darker | blue-cool-60v | #07648d | navy-90 | #06162d |
.border-accent-cool-darkest | false |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.border-error-lighter | red-warm-10 | #f4e3db | cranberry-10 | #fde2ea |
.border-error-light | red-warm-30v | #f39268 | cranberry-30v | #f27da2 |
.border-error | red-warm-50v | #d54309 | cranberry-50v | #e41154 |
.border-error-dark | red-60v | #b50909 | cranberry-60v | #b60d43 |
.border-error-darker | red-70 | #6f3331 | cranberry-70 | #950b30 |
.border-warning-lighter | yellow-5 | #faf3d1 | golden-5 | #fdf2bf |
.border-warning-light | yellow-10v | #fee685 | golden-10v | #ffe396 |
.border-warning | gold-20v | #ffbe2e | golden-20v | #ffbe2e |
.border-warning-dark | gold-30v | #e5a000 | golden-30v | #e5a000 |
.border-warning-darker | gold-50v | #936f38 | golden-50v | #936f38 |
.border-success-lighter | green-cool-5 | #ecf3ec | teal-5 | #dbf2f3 |
.border-success-light | green-cool-20v | #70e17 | teal-20v | #67e4e8 |
.border-success | green-cool-40v | #00a91c | teal-40v | #42979a |
.border-success-dark | green-cool-50v | #008817 | teal-50v | #338084 |
.border-success-darker | green-cool-60v | #216e1f | teal-60v | #206b6f |
.border-info-lighter | cyan-5 | #e7f6f8 | cerulean-10 | #d4e7f2 |
.border-info-light | cyan-20 | #99deea | cerulean-20 | #99cae4 |
.border-info | cyan-30v | #00bde3 | cerulean-30v | #51b8f0 |
.border-info-dark | cyan-40v | #009ec1 | cerulean-40v | #2099df |
.border-info-darker | blue-cool-60 | #2e6276 | cerulean-60v | #01679d |
.border-disabled-light | gray-10 | #e6e6e6 | ||
.border-disabled | gray-20 | #c9c9c9 | ||
.border-disabled-dark | gray-30 | #adadad | ||
.border-emergency | red-warm-60v | #9c3d10 | cranberry-60v | #b60d43 |
.border-emergency-dark | red-warm-80 | #332d29 | cranberry-80 | #700824 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.outline-transparent | transparent | |||
.outline-black | black | |||
.outline-white | white |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.outline-teal | teal-50 | #298085 | ||
.outline-cerulean | cerulean-50 | #007bbd | ||
.outline-cranberry | cranberry-60 | #bb0e3d | ||
.outline-navy | navy-80 | #14315c | ||
.outline-golden | golden-50 | #947100 |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.outline-gray-5 | gray-5 | #f0f0f0 | ||
.outline-gray-10 | gray-10 | #e6e6e6 | ||
.outline-gray-30 | gray-30 | #adadad | ||
.outline-gray-50 | gray-50 | #757575 | ||
.outline-gray-70 | gray-70 | #454545 | ||
.outline-gray-90 | gray-90 | #1b1b1b |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.outline-base-lightest | gray-5 | #f0f0f0 | ||
.outline-base-lighter | gray-cool-10 | #dfe1e2 | ||
.outline-base-light | gray-cool-30 | #a9aeb1 | ||
.outline-base | gray-cool-50 | #71767a | ||
.outline-base-dark | gray-cool-60 | #565c65 | ||
.outline-base-darker | gray-cool-70 | #3d4551 | ||
.outline-base-darkest | gray-90 | #1b1b1b | ||
.outline-ink | gray-90 | #1b1b1b | ||
.outline-primary-lightest | false | |||
.outline-primary-lighter | blue-10 | #d9e8f6 | cerulean-20 | #99cae4 |
.outline-primary-light | blue-30 | #73b3e7 | cerulean-40 | #3395ca |
.outline-primary | blue-60v | #005ea2 | cerulean-50 | #007bbd |
.outline-primary-vivid | blue-warm-60v | #0050d8 | cerulean-50v | #067cbc |
.outline-primary-dark | blue-warm-70v | #1a4480 | cerulean-70 | #004e7a |
.outline-primary-darker | blue-warm-80v | #162e51 | cerulean-80 | #003a57 |
.outline-primary-darkest | false | |||
.outline-secondary-lightest | false | |||
.outline-secondary-lighter | red-cool-10 | #f3e1e4 | teal-10 | #beebee |
.outline-secondary-light | red-30 | #f2938c | teal-30 | #4bbfc6 |
.outline-secondary | red-50 | #d83933 | teal-50 | #298085 |
.outline-secondary-vivid | red-cool-50v | #e41d3d | teal-50v | #338084 |
.outline-secondary-dark | red-60v | #b50909 | teal-70 | #1e4c4f |
.outline-secondary-darker | red-70v | #8b0a03 | teal-80 | #17373a |
.outline-secondary-darkest | false | |||
.outline-accent-warm-lightest | false | |||
.outline-accent-warm-lighter | orange-10 | #f2e4d4 | golden-5 | #fdf2bf |
.outline-accent-warm-light | orange-20v | #ffbc78 | golden-10 | #fee685 |
.outline-accent-warm | orange-30v | #fa9441 | golden-20 | #face00 |
.outline-accent-warm-dark | orange-50v | #c05600 | golden-30 | #ddaa01 |
.outline-accent-warm-darker | orange-60 | #775540 | golden-40 | #b38c00 |
.outline-accent-warm-darkest | false | |||
.outline-accent-cool-lightest | false | |||
.outline-accent-cool-lighter | blue-cool-5v | #e1f3f8 | navy-10 | #d7e5f4 |
.outline-accent-cool-light | blue-cool-20v | #97d4ea | navy-30 | #92a9c8 |
.outline-accent-cool | cyan-30v | #00bde3 | navy-50 | #5478ab |
.outline-accent-cool-dark | blue-cool-40v | #28a0cb | navy-70 | #284976 |
.outline-accent-cool-darker | blue-cool-60v | #07648d | navy-90 | #06162d |
.outline-accent-cool-darkest | false |
Class name | USWDS default | hex | NCIDS change | hex |
---|---|---|---|---|
.outline-error-lighter | red-warm-10 | #f4e3db | cranberry-10 | #fde2ea |
.outline-error-light | red-warm-30v | #f39268 | cranberry-30v | #f27da2 |
.outline-error | red-warm-50v | #d54309 | cranberry-50v | #e41154 |
.outline-error-dark | red-60v | #b50909 | cranberry-60v | #b60d43 |
.outline-error-darker | red-70 | #6f3331 | cranberry-70 | #950b30 |
.outline-warning-lighter | yellow-5 | #faf3d1 | golden-5 | #fdf2bf |
.outline-warning-light | yellow-10v | #fee685 | golden-10v | #ffe396 |
.outline-warning | gold-20v | #ffbe2e | golden-20v | #ffbe2e |
.outline-warning-dark | gold-30v | #e5a000 | golden-30v | #e5a000 |
.outline-warning-darker | gold-50v | #936f38 | golden-50v | #936f38 |
.outline-success-lighter | green-cool-5 | #ecf3ec | teal-5 | #dbf2f3 |
.outline-success-light | green-cool-20v | #70e17 | teal-20v | #67e4e8 |
.outline-success | green-cool-40v | #00a91c | teal-40v | #42979a |
.outline-success-dark | green-cool-50v | #008817 | teal-50v | #338084 |
.outline-success-darker | green-cool-60v | #216e1f | teal-60v | #206b6f |
.outline-info-lighter | cyan-5 | #e7f6f8 | cerulean-10 | #d4e7f2 |
.outline-info-light | cyan-20 | #99deea | cerulean-20 | #99cae4 |
.outline-info | cyan-30v | #00bde3 | cerulean-30v | #51b8f0 |
.outline-info-dark | cyan-40v | #009ec1 | cerulean-40v | #2099df |
.outline-info-darker | blue-cool-60 | #2e6276 | cerulean-60v | #01679d |
.outline-disabled-light | gray-10 | #e6e6e6 | ||
.outline-disabled | gray-20 | #c9c9c9 | ||
.outline-disabled-dark | gray-30 | #adadad | ||
.outline-emergency | red-warm-60v | #9c3d10 | cranberry-60v | #b60d43 |
.outline-emergency-dark | red-warm-80 | #332d29 | cranberry-80 | #700824 |
Class name | USWDS default | NCIDS change |
---|---|---|
.box-shadow-none |
none |
|
.box-shadow-1 |
0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.1) |
0 units(1px) units(0.5) 0 rgba(0, 0, 0, 0.3) |
.box-shadow-2 |
0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.1) |
0 units(0.5) units(1) 0 rgba(0, 0, 0, 0.3) |
.box-shadow-3 |
0 units(1) units(2) 0 rgba(0, 0, 0, 0.1) |
0 units(1) units(2) 0 rgba(0, 0, 0, 0.3) |
.box-shadow-4 |
0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.1) |
0 units(1.5) units(3) 0 rgba(0, 0, 0, 0.3) |
.box-shadow-5 |
0 units(2) units(4) 0 rgba(0, 0, 0, 0.1) |
0 units(2) units(4) 0 rgba(0, 0, 0, 0.3) |