GSA/code-gov-front-end

View on GitHub
styles/theme/_uswds-theme-color.scss

Summary

Maintainability
Test Coverage
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.3.1
----------------------------------------
COLOR SETTINGS
----------------------------------------
Read more about settings and
USWDS color tokens in the documentation:
https://v2.designsystem.digital.gov/style-tokens/color
----------------------------------------
*/

/*
----------------------------------------
Theme palette colors
----------------------------------------
*/

$color-white: #fff;

$brand-primary: #07648d; //blue-cool-60v

$brand-blue: #07648d; //remove
$brand-blue-dark: #074b69; //blue-cool-70v
$brand-blue-light: #e1f3f8; //blue-cool-5v

$brand-blue-gray-light: #71839d; //remove
$brand-blue-gray: #485568; //remove

$brand-gray: #3d4551; //gray-cool-70

$brand-teal: #1dc2ae; //mint-cool-30v
$brand-teal-medium: #00a398; //mint-cool-40v
$brand-teal-dark: #21827f; //mint-cool-50

$brand-purple: #3f57a6; //indigo-cool-60
$brand-purple-dark: #374274; //indigo-cool-70

//USWDS
// Base colors
$theme-color-base-family: 'gray-cool';
$theme-color-base-lightest: 'gray-3';
$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-cool';
$theme-color-primary-lightest: false;
$theme-color-primary-lighter: 'blue-cool-5v';
$theme-color-primary-light: 'blue-cool-30';
$theme-color-primary: 'blue-cool-60v';
$theme-color-primary-vivid: 'blue-warm-60v';
$theme-color-primary-dark: 'blue-cool-70v';
$theme-color-primary-darker: 'blue-warm-80v';
$theme-color-primary-darkest: false;

// Secondary colors
$theme-color-secondary-family: 'mint-cool';
$theme-color-secondary-lightest: 'mint-cool-5';
$theme-color-secondary-lighter: 'mint-cool-10';
$theme-color-secondary-light: 'mint-cool-30v';
$theme-color-secondary: 'mint-cool-40v';
$theme-color-secondary-vivid: 'mint-30v';
$theme-color-secondary-dark: 'mint-cool-50';
$theme-color-secondary-darker: 'mint-cool-60';
$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: 'indigo-cool';
$theme-color-accent-cool-lightest: false;
$theme-color-accent-cool-lighter: 'blue-warm-20v';
$theme-color-accent-cool-light: 'blue-warm-40v';
$theme-color-accent-cool: 'indigo-cool-60v';
$theme-color-accent-cool-dark: 'indigo-cool-60';
$theme-color-accent-cool-darker: 'indigo-cool-60';
$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';

/*
----------------------------------------
General colors
----------------------------------------
*/

// Links
$theme-link-color: 'primary';
$theme-link-visited-color: 'primary';
$theme-link-hover-color: 'secondary';
$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';