_s-colors.scss

/* ==========================================================================
   Colors
   ========================================================================== */

// Tint & shade helper functions
// ---
// Makes a color lighter
@function tint($color, $percent) {
  @return mix(#fff, $color, $percent);
}

// Makes a color darker
@function shade($color, $percent) {
  @return mix(#000, $color, $percent);
}

// Color palette
$auk-white       : #FFFFFF;
$auk-black       : #000000;

$auk-gray-100    : #F4F5F6;
$auk-gray-200    : #E6E8EB;
$auk-gray-300    : #CCD1D9;
$auk-gray-400    : #A1ABBA;
$auk-gray-500    : #8E98A6;
$auk-gray-600    : #69717C;
$auk-gray-700    : #545961;
$auk-gray-800    : #2A2D31;
$auk-gray-900    : #212326;
$auk-gray-1000   : #000000;

$auk-blue-100    : #D4E3F7;
$auk-blue-500    : #0055CC;
$auk-blue-700    : #004099;
$auk-blue-800    : #002A64;

$auk-yellow-100  : #FCF1CF;
$auk-yellow-300  : #FEE85C;
$auk-yellow-500  : #FFC515;
$auk-yellow-700  : #997300;
$auk-yellow-800  : #664D00;
$auk-brand       : #FEEA52;

$auk-red-50      : #FBE9E9;
$auk-red-100     : #F7D4D4;
$auk-red-300     : #E87878;
$auk-red-500     : #DB3434;
$auk-red-700     : #990000;
$auk-red-800     : #5E0000;

$auk-green-100   : #F7FAE5;
$auk-green-300   : #D8E878;
$auk-green-500   : #8BAE00;
$auk-green-700   : #238000;
$auk-green-800   : #165100;

// Additional colors (not for regular use)
$auk-pink: #E86AB9;


/* Semantic colors
 ========================================================================== */
 
$auk-color-primary: $auk-blue-500;
$auk-color-heading: $auk-gray-900;
$auk-color-text: $auk-gray-800;
$auk-color-muted: $auk-gray-600;
$auk-color-border: $auk-gray-300;