Variables
In order to better scale and extend the library, it is highly encouraged to reuse the library's SCSS variables (as listed in the file /utils/_variables.scss). Below is the list of variables:
Color Variables
As visible in our Color Scheme, each main color has a dark and light spectrum go with it, therefore, a list of color variants variables is also required.
Primary Colors
$primary-color: #1e99eb;
$primary-color-dark-20: #1077bc;
$primary-color-dark-40: #0b5383;
$primary-color-dark-60: #083c5e;
$primary-color-dark-80: #052438;
$primary-color-dark-100: #020c13;
$primary-color-light-20: #56b3f0;
$primary-color-light-40: #7cc4f4;
$primary-color-light-60: #8eccf5;
$primary-color-light-80: #c7e6fa;
$primary-color-light-100: #ecf7fd;
Grey Colors
$grey: #6d818e;
$grey-dark-20: #51626d;
$grey-dark-40: #38444c;
$grey-dark-60: #293137;
$grey-dark-80: #181d21;
$grey-dark-100: #08090b;
$grey-light-20: #91a0aa;
$grey-light-40: #a9b5bd;
$grey-light-60: #b5bfc6;
$grey-light-80: #dadfe3;
$grey-light-100: #f2f4f5;
Success Colors
$success-color: #85b257;
$success-color-dark-20: #709a47;
$success-color-dark-40: #5c7e3a;
$success-color-dark-60: #47622d;
$success-color-dark-80: #334620;
$success-color-dark-100: #1f2a13;
$success-color-light-20: #99bf73;
$success-color-light-40: #adcc8f;
$success-color-light-60: #c2d8ab;
$success-color-light-80: #d6e5c7;
$success-color-light-100: #ebf2e3;
Warning Colors
$warning-color: #c99b40;
$warning-color-dark-20: #af8531;
$warning-color-dark-40: #8f6d28;
$warning-color-dark-60: #6f551f;
$warning-color-dark-80: #503d16;
$warning-color-dark-100: #30240d;
$warning-color-light-20: #d2ac60;
$warning-color-light-40: #dbbd80;
$warning-color-light-60: #e4cda0;
$warning-color-light-80: #eddebf;
$warning-color-light-100: #f6eedf;
Danger Colors
$danger-color: #c46345;
$danger-color-dark-20: #ab5136;
$danger-color-dark-40: #8c422c;
$danger-color-dark-60: #6d3422;
$danger-color-dark-80: #4e2518;
$danger-color-dark-100: #2f160f;
$danger-color-light-20: #cd7b62;
$danger-color-light-40: #d89783;
$danger-color-light-60: #e2b1a2;
$danger-color-light-80: #ebcbc1;
$danger-color-light-100: #f5e5e0;
Basic Colors
$white: #fff;
$black: #000;
Text Related Variables
Base Text Colors
$base-font-color: $grey-dark-80;
$base-link-color: $primary-color;
Font Stack
$font-stack: 'OpenSans', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Helvetica Neue', 'Droid Sans', Helvetica, Arial, sans-serif;
$base-font-family: $font-stack;
$header-font-family: $font-stack;
Font Sizes
$base-font-size: 14px;
$h1-font-size: 38px;
$h2-font-size: 27px;
$h3-font-size: 20px;
$h4-font-size: 14px;
$h5-font-size: 14px;
$h6-font-size: 12px;
$small-font-size: 12px;
$tiny-font-size: 10px;
Line Heights
$base-line-height: 1.5;
$header-line-height: 1.35;
Font Weight Scale
$font-weight-regular: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-xbold: 800;
Grid Columns
$grid-columns: 12;
Break Points
$xsmall: em(320px);
$small: em(640px);
$normal: em(960px);
$medium: em(1024px);
$large: em(1440px);
$xlarge: em(1920px);
Border Radii
$base-border-radius: 3px;
$round-border-radius: 50%;
Spacing
$spacing-small: 5px;
$spacing-normal: 10px;
$spacing-large: 20px;
$spacing-xlarge: 30px;
$spacing-jumbo: 40px;
Border
$base-border-color: $grey-light-80;
$base-border: 1px solid $base-border-color;
$quote-border-left: $primary-color;
Icon Stack
$icon-stack: 'SuperTightIconset';
Form
$input-hover-bg: rgba($primary-color, .02);
$input-success-shadow: rgba($success-color, .5);