compote/style/variables.scss

// Colors
$neutral-lighter: #ffffff !default;
$neutral-light: #ecf0f1 !default;
$neutral: #bdc3c7 !default;
$neutral-dark: darken($neutral, 10%) !default;
$neutral-darker: darken($neutral, 30%) !default;

$foreground-light: #999999 !default;
$foreground-light: #666666 !default;
$foreground: #333333 !default;
$foreground-dark: #111111 !default;
$foreground-darker: #000000 !default;

$primary: #2c3e50 !default;
$primary-lighter: lighten($primary, 20%) !default;
$primary-light: lighten($primary, 10%) !default;
$primary-dark: darken($primary, 10%) !default;
$primary-darker: darken($primary, 15%) !default;

$success: #2ecc71 !default;
$success-dark: darken($success, 10%) !default;

$info: #3498db !default;
$info-dark: darken($info, 10%) !default;

$warning: #f1c40f !default;
$warning-dark: darken($warning, 10%) !default;

$danger: #db4437 !default;
$danger-dark: darken($danger, 10%) !default;

// Device sizes
$xxl-min: 2000px !default;

$xl-max: $xxl-min - 1;
$xl-min: 1600px !default;

$lg-max: $xl-min - 1;
$lg-min: 1200px !default;

$md-max: $lg-min - 1;
$md-min: 992px !default;

$sm-max: $md-min - 1;
$sm-min: 768px !default;

$xs-max: $sm-min - 1;
$xs-min: 375px !default;

$xxs-max: $xs-min - 1;

// Font
$font-size: 14px !default;
$font-family: 'Trebuchet MS', Helvetica, sans-serif !default;

$h1-font-size: 40px !default;
$h2-font-size: 32px !default;
$h3-font-size: 24px !default;
$h4-font-size: 20px !default;
$h5-font-size: 16px !default;
$h6-font-size: 14px !default;

// Layout
$border-radius: 3px !default;
$spacing: 10px !default;

// Animation
$animation-duration: 0.4s !default;
$animation-easing: cubic-bezier(0.25, 1, 0.25, 1) !default; // ease