src/assets/scss/settings/_settings.scss
@import 'typography';

$color-red:                   #F06D31;
$color-yellow:                #ffd52b;
$color-orange:                #f39a2d;

$color-pink:                  #db50b4;
$color-lavender:              #7059d3;

$color-bluelight:             #48bec5;
$color-bluedark:              #2b67c2;

$color-green:                 #97d779;
$color-greendark:             #5da83a;

$color-turquoise:             #478bb3;


$code-margin:                 0.2em;
$code-radius:                 $code-margin;

$index-canvas-main:           100;
$index-canvas-temp:           110;
$index-canvas-interface:      710;

$index-brush:                 300;
$index-color-picker:          400;
$index-header:                460;
$index-overlay:               470;
$index-toolbar:               500;
$index-brush-toolbar:         500;

$index-mobile-pairing:        700;

$index-background-animation:  800;
$index-footer:                1200;
$index-drawing:               1100;
$index-pairing:               700;

$index-modal:                1000;

$toolbar-height:              5rem;

$footer-height-xs:            54px;

$toolbar-button-width-xs:     1.75rem;
$toolbar-button-width-sm:     1.75rem;
$toolbar-button-width-md:     2.25rem;
$toolbar-button-width-lg:     4rem;

$shadow-s:                    0 3px 10px rgba($alt-color, 0.13),
                              0 2px 4px 1px rgba($alt-color, 0.1);

/*----------------------------------------*\
  GLOBAL SETTINGS
\*----------------------------------------*/

// Use this setting to prefix all the components classes
$namespace:                         '';

// Flip all left/right properties for right-to-left languages
$rtl:                               false;


/**
 * Colors
 */

$brand-color:                       #fb6131;
$brand-color-darker:                darken($brand-color, 10%);

$alt-color-lightest:                #dfdde0;
$alt-color-lighter:                 #a7a0a8;
$alt-color-light:                   #867c88;
$alt-color:                         #554757;
$alt-color-dark:                    #39293c;
$alt-color-darker:                  #2a192d;
$alt-color-darkest:                 #201123;


$color-translucent-dark:      rgba($alt-color-darkest, 0.9);

/**
 * Typography
 */

$font-family-default:               "Barlow", 'Heebo', -apple-system, BlinkMacSystemFont,
                                    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
                                    'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                                    sans-serif;

$font-size-default:                 16px;
$font-size-small:                   .875rem;
$font-size-large:                   1.5rem;

$line-height-default:               1.45;

$text-color:                        $alt-color-lightest;
$link-color:                        $brand-color;
$muted-color:                       $alt-color-lighter;


/**
 * Spacings
 */

$ratio:                             1.61803398875;

$spacing-unit-tiny:                 4px;
$spacing-unit-small:                8px;
$spacing-unit-default:              16px;
$spacing-unit-large:                24px;
$spacing-unit-huge:                 48px;

$spacings:                          (
                                      'tight' 0,
                                      'tiny' $spacing-unit-tiny,
                                      'small' $spacing-unit-small,
                                      'large' $spacing-unit-large,
                                      'huge' $spacing-unit-huge
                                    );


/**
 * Responsiveness
 */

// Use EM media-queries for better browser consistency
// See http://zellwk.com/blog/media-query-units
$screen-xs-max:                      699px / 16px * 1em;
$screen-sm-min:                      700px / 16px * 1em;
$screen-sm-max:                     1024px / 16px * 1em;
$screen-md-min:                     1025px / 16px * 1em;
$screen-md-max:                     1440px / 16px * 1em;
$screen-lg-min:                     1441px / 16px * 1em;
$screen-lg-max:                     1679px / 16px * 1em;
$screen-xl-min:                     1680px / 16px * 1em;

$breakpoints-default:               (
                                      'sm' '(min-width: #{$screen-sm-min})',
                                      'md' '(min-width: #{$screen-md-min})',
                                      'lg' '(min-width: #{$screen-lg-min})'
                                    );
$breakpoints-desc:                  (
                                      'xs' '(max-width: #{$screen-xs-max})',
                                      'sm' '(max-width: #{$screen-sm-max})',
                                      'md' '(max-width: #{$screen-md-max})'
                                    );
$breakpoints-extra:               (
                                      'xl' '(min-width: #{$screen-xl-min})',
                                    );

/**
 * Miscellaneous
 */

$border-radius-default:             4px;
$border-radius-small:               2px;
$border-radius-large:               6px;


/*----------------------------------------*\
  COMPONENTS
\*----------------------------------------*/

/**
 * Buttons
 */

$btn-padding:                       1rem;
$btn-color:                         inherit;
$btn-font-size:                     inherit;
$btn-font-family:                   inherit;
$btn-border:                        0;
$btn-bkg:                           transparent;
$btn-border-radius:                 $border-radius-default;

$btn-small-padding:                 $spacing-unit-tiny/$ratio $spacing-unit-tiny;
$btn-small-font-size:               $font-size-small;
$btn-small-border:                  $btn-border;
$btn-small-border-radius:           $border-radius-small;

$btn-large-padding:                 $spacing-unit-default/$ratio $spacing-unit-default;
$btn-large-font-size:               $font-size-large;
$btn-large-border:                  $btn-border;
$btn-large-border-radius:           $border-radius-large;

$btn-default-color:                 $text-color;
$btn-default-bkg-color:             $alt-color-lighter;
$btn-default-hover-bkg-color:       lighten($btn-default-bkg-color, 3%);
$btn-default-active-bkg-color:      darken($btn-default-bkg-color, 5%);

$btn-primary-color:                 white;
$btn-primary-bkg-color:             $brand-color;
$btn-primary-hover-bkg-color:       lighten($btn-primary-bkg-color, 8%);
$btn-primary-active-bkg-color:      darken($btn-primary-bkg-color, 5%);


/**
 * Forms
 */

$field-padding:                     $spacing-unit-small/$ratio $spacing-unit-small;

$field-color:                       inherit;
$field-font-size:                   inherit;
$field-font-family:                 inherit;
$field-line-height:                 $line-height-default;

$field-bkg-color:                   white;
$field-border:                      1px solid $alt-color-light;
$field-focus-border-color:          $alt-color-darker;
$field-border-radius:               $border-radius-default;

$field-disabled-bkg-color:          $alt-color-lighter;
$field-disabled-color:              $alt-color;

$field-small-padding:               $spacing-unit-tiny/$ratio $spacing-unit-tiny;
$field-small-font-size:             $font-size-small;
$field-small-border:                $field-border;
$field-small-border-radius:         $border-radius-small;

$field-large-padding:               $spacing-unit-default/$ratio $spacing-unit-default;
$field-large-font-size:             $font-size-large;
$field-large-border:                $field-border;
$field-large-border-radius:         $border-radius-large;

$field-help-color:                  $alt-color-light;

$form-group-spacing:                $spacing-unit-small;

/**
 * Lists
 */

$list-separator-style:              1px solid $alt-color-dark;


/**
 * Box
 */

$box-default-color:                 inherit;
$box-default-bkg-color:             $alt-color-lighter;

$box-primary-color:                 white;
$box-primary-bkg-color:             $brand-color;


/**
 * Widths
 */

$widths-columns:                    6,5,4,3,2,1;
$widths-breakpoints:                $breakpoints-default;


/**
 * Media responsive
 */

$media-collapse:                    $screen-sm-max;


/**
 * Container
 */

$container-gutter-width:            $spacing-unit-small;
$container-max-width:               1200px;


/**
 * Table responsive
 */

$table-responsive-collapse:         $screen-sm-max;
