KNACSS/sass/_config/_variables.scss

// Config file and project variables

// ------------
// Spacing zone
// ------------

// Number of grid-columns
$cols: 12 !default;

// Grid gutters (for .has-gutter-* classes)
$grid-gutters: (
  '': 1rem,
  '-l': 2rem,
  '-xl': 4rem
) !default;

// Spacings
$spacer-tiny             : .5rem  !default;
$spacer-tiny-plus        : .7rem !default;
$spacer-small            : 1rem !default;
$spacer-small-plus       : 1.5rem !default;
$spacer-medium           : 2rem !default;
$spacer-medium-plus      : 3rem !default;
$spacer-large            : 4rem !default;
$spacer-large-plus       : 6rem !default;
$spacer-extra-large      : 8rem !default;
$spacer-extra-large-plus : 12rem !default;
$spacer-ultra-large      : 16rem !default;
$spacer-ultra-large-plus : 20rem !default;

// z-indexes
$zindex-navigation   : 1000 !default;
$zindex-dropdown     : 2000 !default;
$zindex-popover      : 3000 !default;
$zindex-tooltip      : 4000 !default;
$zindex-modal        : 5000 !default;
$zindex-notification : 6000 !default;
$zindex-debug        : 7000 !default;

// ----------
// Color zone
// ----------

// Color names
$white    : #fff !default;
$gray-100 : #f8f9fa !default;
$gray-200 : #e7e9ed !default;
$gray-300 : #dee2e6 !default;
$gray-400 : #ced4da !default;
$gray-500 : #acb3c2 !default;
$gray-600 : #727e96 !default;
$gray-700 : #454d5d !default;
$gray-800 : #333 !default;
$gray-900 : #212529 !default;
$black    : #000 !default;

$blue-300   : #5BC0DE !default;
$blue-500   : #0275D8 !default;
$green-500  : #5CB85C !default;
$orange-500 : #F0AD4E !default;
$red-500    : #D9534F !default;

// Semantic colors
$color-brand    : $green-500 !default;
$color-primary  : $blue-500 !default;
$color-success  : $green-500 !default;
$color-info     : $blue-300 !default;
$color-warning  : $orange-500 !default;
$color-danger   : $red-500 !default;
$color-inverse  : $gray-800 !default;
$color-ghost    : transparent !default;
$color-muted    : $gray-200 !default;

// ---------------
// Components zone
// ---------------

// Global border-radius
$border-radius: 0 !default;

// Components: buttons, badges, alerts color variants list
// Convention is: name - background-color - color - border
$variants-list: (
  (primary,    $color-primary,    $white,    none),
  (success,    $color-success,    $white,    none),
  (info,       $color-info,       $black,    none),
  (warning,    $color-warning,    $black,    none),
  (danger,     $color-danger,     $white,    none),
  (inverse,    $color-inverse,    $white,    none),
  (ghost,      $color-ghost,      $white,    0 0 0 1px $white inset)
) !default;