variables

Color variables

All of the colors here are default values intended to give a reasonable base set of colors to use in an application.

$ghost-white-light: rgba(white, 0.25) !default;
$ghost-white-base:  rgba(white, 0.5) !default;
$ghost-white-dark:  rgba(white, 0.75) !default;
$ghost-black-light: rgba(black, 0.1) !default;
$ghost-black-base:  rgba(black, 0.25) !default;
$ghost-black-dark:  rgba(black, 0.5) !default;

$base-gray-lightest: #eeeff4 !default;
$base-gray-light:    #d5dbe7 !default;
$base-gray-soft:     #a2acb7 !default;
$base-gray:          #677084 !default;
$base-gray-dark:     #505a69 !default;
$base-gray-darkest:  #3f4551 !default;

$base-whale-gray:    #ababbb !default;
$base-yellow:        #fffc71 !default;
$base-green:         #0fa359 !default;
$base-blue:          #3874b5 !default;
$base-blue-dark:     #284c72 !default;
$base-blue-soft:     #77abc9 !default;
$base-blue-light:    #a9caea !default;
$base-cyan:          #2ca8e4 !default;
$base-cyan-light:    #5ebdea !default;
$base-red:           #b70808 !default;
$base-orange:        #e39215 !default;
$base-tomato:        #e73c36 !default;
$base-lime:          #9ee76d !default;
$base-tangerine:     #ffd912 !default;
$base-aqua:          #7FDBFF !default;
$base-grape:         #945eff !default;
$base-violet:        #cd95f0 !default;
$base-peach:         #ffa086 !default;

Global variables

These variables set up consistent framework conventions

$xs : ("xs", "extra-small", 1px,  1 ) !default;
$sm : ("sm", "small",       2px,  2 ) !default;
$md : ("md", "medium",      4px,  4 ) !default;
$lg : ("lg", "large",       8px,  8 ) !default;
$xl : ("xl", "extra-large", 16px, 16) !default;

$top:    ("t", "top")    !default;
$bottom: ("b", "bottom") !default;
$left:   ("l", "left")   !default;
$right:  ("r", "right")  !default;