GSA/christopher

View on GitHub
_sass/_uswds_variables.scss

Summary

Maintainability
Test Coverage
// Variables copied from USWDS src/stylesheets/core/_variables.scss

// Color
$color-primary:              #0071bc;
$color-primary-darker:       #205493;
$color-primary-darkest:      #112e51;

$color-primary-alt:          #02bfe7;
$color-primary-alt-dark:     #00a6d2;
$color-primary-alt-darkest:  #046b99;
$color-primary-alt-light:    #9bdaf1; // lighten($color-primary-alt, 60%)
$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)

$color-secondary:            #e31c3d;
$color-secondary-dark:       #cd2026;
$color-secondary-darkest:    #981b1e;
$color-secondary-light:      #e59393; // lighten($color-secondary, 60%)
$color-secondary-lightest:   #f9dede; // lighten($color-secondary, 90%)

$color-white:                #ffffff;
$color-base:                 #212121;
$color-black:                #000000;

$color-gray-dark:            #323a45;
$color-gray:                 #5b616b; // lighten($color-gray-dark, 20%)
$color-gray-medium:          #757575; // lightest gray that passes color contrast
$color-gray-light:           #aeb0b5; // lighten($color-gray-dark, 60%)
$color-gray-lighter:         #d6d7d9; // lighten($color-gray-dark, 80%)
$color-gray-lightest:        #f1f1f1; // lighten($color-gray-dark, 91%)

$color-gray-warm-dark:       #494440;
$color-gray-warm-light:      #e4e2e0; // lighten($color-gray-warm-dark, 90%)
$color-gray-cool-light:      #dce4ef; // lighten($color-primary, 90%)

$color-gold:                 #fdb81e;
$color-gold-light:           #f9c642; //  lighten($color-gold, 20%)
$color-gold-lighter:         #fad980; //  lighten($color-gold, 60%)
$color-gold-lightest:        #fff1d2; //  lighten($color-gold, 83%)

$color-green:                #2e8540;
$color-green-light:          #4aa564; // lighten($color-green, 20%)
$color-green-lighter:        #94bfa2; // lighten($color-green, 60%)
$color-green-lightest:       #e7f4e4; // lighten($color-green, 60%)

$color-cool-blue:            #205493;
$color-cool-blue-light:      #4773aa; // lighten($color-cool-blue, 20%)
$color-cool-blue-lighter:    #8ba6ca; // lighten($color-cool-blue, 60%)
$color-cool-blue-lightest:   #dce4ef; // lighten($color-cool-blue, 90%)

$color-focus:                #3e94cf;
$color-visited:              #4c2c92;

$color-shadow:               rgba(#000, 0.3);

// Mobile First Breakpoints
$small-screen:      481px;
$medium-screen:     600px;
$large-screen:      1201px;