A SASS variable & Mixin boilerplate for codepen work.

echo-one-base.scss

$c_brand:          #2098CA;
$c_brand-alt:      #1055ff; // stratum blue

// key gray scale colors used with microcopy
$c_primary:        #111;
$c_secondary:      #848484;
$c_lightest_gray:  #ddd;
$c_light_gray:     #aaa;
$c_mid_gray:       #777;
$c_dark_gray:      #444;

// monochromatic blue scale - #2098CA based
$c_light1:         #F0F5F7; // lightest
$c_light2:         #E1F1F7;
$c_light3:         #D1E2E9;
$c_light4:         #C5D7DF;
$c_mid1:           #95B8C6;
$c_dark1:          #186787;
$c_dark2:          #05425D; // darkest

// monochromatic blue scale - #1055FF based
$c_b_light1:       #EFF2F4;
$c_b_light3:       #D4E0E8;
$c_b_mid1:         #64737D;
$c_b_dark1:        #313C45;
$c_b_dark2:        #141C22;

// BaaS purples
$c_light_purple:   #E1E4F7;

// HL7 oranges
$c_orange:         #F88A34;
$c_light_orange:   #FFF1E6;
$c_dark_orange:    #E46909;
$c_fhir:           #F81903;
$c_fhir_dark:      #7D120A;

// Blog Purple
$c_mid_purple:     #7E27CA;

// Reds
$c_red:            #E13333; // validation
$c_red_accent:     #C8132A;

// Action green
$c_green:          #94cb57;

// Innovation Series Yellow
$c_yellow:         #FAF300;
$c_mid_yellow:     #EFD300;
$c_dark_yellow:    #99951D;
$c_b_yellow:       #E8F198;

// New Innovation series - yellow-green
$c_yellow_green:   hsl(68, 100%, 75%);

// Redpoint
$c_redpoint:       #D93939;
$c_redpoint_light: #F4B5B5;
$c_redpoint_dark:  #7D120A;

// Why Colors
$c_why-db:         #0B1B40;
$c_why-light-text: #F6FCFF;
$c_why-compliment: #FFCE8D;
$c_border:         #BAC8D8;

$c_compliance:     #242F36; // compliance will be rewarded
$c_stratum:        #426788;

.color-white {
    background-color: white;
}
.color-primary {
    background-color: $c_brand-alt;
    &-light {
        background-color: $c_b_light1;
    }
}
@mixin border-radius($radius){
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}
@mixin easing($s){
	-moz-transition: all $s ease;
	-webkit-transition: all $s ease;
	-o-transition: all $s ease;
	transition: all $s ease
}
@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false){
	$shadow: $shadow1;
	@if $shadow2 != false
		{ $shadow: $shadow1, $shadow2; }
		@if $shadow3 != false
			{ $shadow: $shadow1, $shadow2, $shadow3; }

	-moz-box-shadow: $shadow;
	-webkit-box-shadow: $shadow;
	box-shadow: $shadow;
}