KNACSS/sass/_config/_variables.scss

// Config file and project variables

// breakpoints values
// warning: you should use your own values, regardless of the devices
// best practise is Mobile First: (min-width: $breakpoint)
$tiny        : 480px !default; // or 'em' if you prefer, of course
$small       : 576px !default;
$medium      : 768px !default;
$large       : 992px !default;
$extra-large : 1200px !default;

// font families
$font-family-base     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // system font stack
$font-family-headings  : sans-serif; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace; // font for code and samples

// font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem;

$font-sizes: (
  base: (
    mobile  : 1.4rem,
    desktop : $font-size-base
  ),
  h1: (
    mobile  : 2.8rem,
    desktop : 3.2rem
  ),
  h2: (
    mobile  : 2.4rem,
    desktop : 3.8rem
  ),
  h3: (
    mobile  : 2.0rem,
    desktop : 2.4rem
  ),
  h4: (
    mobile  : 1.8rem,
    desktop : 2.0rem
  ),
  h5: (
    mobile  : 1.6rem,
    desktop : 1.8rem
  ),
  h6: (
    mobile  : 1.4rem,
    desktop : 1.6rem
  )
) !default;

// line heights
$line-height-s    : 1.3 !default;
$line-height-base : 1.5 !default;
$line-height-l    : 1.7 !default;

// default margin-bottom
$margin-bottom-base     :   1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom:   $margin-bottom-base !default;

// font weights
$weight-light   : 200 !default;
$weight-book    : 300 !default;
$weight-regular : 400 !default;
$weight-medium  : 500 !default;
$weight-bold    : 700 !default;

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

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

// spacings (choose unit you prefer)
$tiny-value             : .5rem  !default;
$tiny-plus-value        : .7rem !default;
$small-value            : 1rem !default;
$small-plus-value       : 1.5rem !default;
$medium-value           : 2rem !default;
$medium-plus-value      : 3rem !default;
$large-value            : 4rem !default;
$large-plus-value       : 6rem !default;
$extra-large-value      : 8rem !default;
$extra-large-plus-value : 12rem !default;
$ultra-large-value      : 16rem !default;
$ultra-large-plus-value : 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 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 color scheme
$color-brand    : $green-500;
$color-primary  : $blue-500;
$color-success  : $green-500;
$color-info     : $blue-300;
$color-warning  : $orange-500;
$color-danger   : $red-500;
$color-inverse  : $gray-800;
$color-ghost    : transparent;
$color-muted    : $gray-200;

$color-base      : $gray-900;
$background-base : $white;

$link-color            : $gray-800;
$link-color-hover      : darken($link-color, 15%);
$link-decoration       : none;
$link-decoration-hover : underline;

$forms-color     : $gray-800;

// component: quotes
$quote-color     : $gray-200;

// component: arrows
$arrow-color     : $black;

// component: checkboxes, radios, switches
$checkbox-color         : $gray-800;
$checkbox-size          : 2rem;
$checkbox-border-radius : 4px;
$switch-color           : $gray-800;
$switch-size            : 2rem;
$switch-border-radius   : 3em;

// component: tables
$table-border               : $gray-500;
$table-caption-color        : $gray-800;
$table-background           : transparent;
$table-head-color           : $color-base;
$table-head-background      : transparent;
$table-footer-color         : $color-base;
$table-footer-background    : transparent;

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

// component: tabs
$tabs-border            : $gray-200;
$tabs-active-border     : $gray-800;
$tabs-color             : $color-base;
$tabs-active-color      : $gray-800;
$tabs-background        : transparent;
$tabs-active-background : transparent;
$tabs-border-radius     : 0;

// component: nav burger button
$burger-color             : $gray-800;
$burger-background        : transparent;
$burger-hover-background  : transparent;
$burger-size              : 2.6rem;
$burger-weight            : 5px; // size of stripes
$burger-padding           : 0;