lib/styles/variables.scss

Summary

Maintainability
Test Coverage
$white:    #fff !default;
$gray-100: #f8f8f8 !default;
$gray-200: #e9e9e9 !default;
$gray-300: #dedede !default;
$gray-400: #cccccc !default; // Brand color
$gray-500: #999999 !default; // Brand color
$gray-600: #696969 !default; // Brand color
$gray-700: #494949 !default;
$gray-800: #3c3c3c !default; // Brand color
$gray-900: #212121 !default;
$black:    #000 !default;

$primary: #ff0000 !default;  // Brand color
$secondary: $gray-500 !default;
$danger: #8B0707 !default; // Brand color
$success: #46EC4E !default;
$info: #0000FF !default;
$warning: #FFBA00 !default;
$light: $gray-200 !default;
$dark: #000 !default;

$brand-grays: () !default;
$brand-grays: map-merge(
  (
    "gray-lighter": $gray-400,
    "gray-light":   $gray-500,
    "gray-dark":    $gray-600,
    "gray-darker":  $gray-800
  ), 
  $brand-grays
);

$body-bg: $white !default;   // Brand color
$body-color: $black !default;  // Brand color
$text-muted: $gray-500 !default;

$component-active-bg: $primary !default;
$component-active-color: $white;

$table-dark-bg: $gray-800 !default;
$table-dark-border-color: $gray-600 !default;

$enable-rounded: false !default;
$enable-shadows: true !default;
$enable-gradients: false !default;

$font-family-sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: "Merriweather", Georgia, "Times New Roman", Times, serif !default;

$headings-font-family: $font-family-sans-serif !default;
$headings-font-weight: 700 !default;

$jumbotron-bg: $gray-200 !default;
$jumbotron-font-family: "Anton", $font-family-sans-serif !default;
$jumbotron-font-weight: 400 !default;

$fade-bg: $gray-400 !default;
$list-group-bg: transparent !default;

$input-focus-border-color: $secondary !default;
$input-bg: $gray-100 !default;
$input-focus-bg: $white !default;
$input-box-shadow: none !default;

$btn-box-shadow: none !default;
$btn-font-family: $font-family-sans-serif;

$form-check-input-gutter: 1.5rem !default;

$popover-body-padding-y: 0 !default;
$popover-body-padding-x: 0 !default;
$popover-max-width: 300px !default;

$popover-box-shadow: 0 10px 30px -5px rgba($black, 0.15) !default;
$dropdown-box-shadow: $popover-box-shadow !default;
$dropdown-min-width: 14rem;

$modal-backdrop-bg: $white !default;
$modal-lg: 990px !default;
$modal-content-box-shadow-xs: $popover-box-shadow !default;
$modal-content-box-shadow-sm-up: $popover-box-shadow !default;

$tooltip-max-width: 260px !default;
$tooltip-opacity: 1 !default;

$alert-border-width: 0;

// Bootstrap variables and functions must be available everywhere
@import 'node_modules/bootstrap/scss/_functions.scss';
@import 'node_modules/bootstrap/scss/_variables.scss';

// Get theses variables to make them available in the doc
$theme-colors: none !default;
$font-family-monospace: none !default;