Dynamic Bootstrap Utility List

gistfile1.txt

# Variable For Commonly Used Bootstrap Utilities.

## Accordion

--bs-accordion-color: #{$accordion-color};
--bs-accordion-bg: #{$accordion-bg};
--bs-accordion-transition: #{$accordion-transition};
--bs-accordion-border-color: #{$accordion-border-color};
--bs-accordion-border-width: #{$accordion-border-width};
--bs-accordion-border-radius: #{$accordion-border-radius};
--bs-accordion-inner-border-radius: #{$accordion-inner-border-radius};
--bs-accordion-btn-padding-x: #{$accordion-button-padding-x};
--bs-accordion-btn-padding-y: #{$accordion-button-padding-y};
--bs-accordion-btn-color: #{$accordion-button-color};
--bs-accordion-btn-bg: #{$accordion-button-bg};
--bs-accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--bs-accordion-btn-icon-width: #{$accordion-icon-width};
--bs-accordion-btn-icon-transform: #{$accordion-icon-transform};
--bs-accordion-btn-icon-transition: #{$accordion-icon-transition};
--bs-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--bs-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--bs-accordion-body-padding-x: #{$accordion-body-padding-x};
--bs-accordion-body-padding-y: #{$accordion-body-padding-y};
--bs-accordion-active-color: #{$accordion-button-active-color};
--bs-accordion-active-bg: #{$accordion-button-active-bg};

## Breadcrumb

--bs-breadcrumb-padding-x: #{$breadcrumb-padding-x};
--bs-breadcrumb-padding-y: #{$breadcrumb-padding-y};
--bs-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --bs-breadcrumb-font-size);
--bs-breadcrumb-bg: #{$breadcrumb-bg};
--bs-breadcrumb-border-radius: #{$breadcrumb-border-radius};
--bs-breadcrumb-divider-color: #{$breadcrumb-divider-color};
--bs-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--bs-breadcrumb-item-active-color: #{$breadcrumb-active-color};

## Buttons

--bs-btn-padding-x: #{$btn-padding-x};
--bs-btn-padding-y: #{$btn-padding-y};
--bs-btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --bs-btn-font-size);
--bs-btn-font-weight: #{$btn-font-weight};
--bs-btn-line-height: #{$btn-line-height};
--bs-btn-color: #{$btn-color};
--bs-btn-bg: transparent;
--bs-btn-border-width: #{$btn-border-width};
--bs-btn-border-color: transparent;
--bs-btn-border-radius: #{$btn-border-radius};
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: #{$btn-box-shadow};
--bs-btn-disabled-opacity: #{$btn-disabled-opacity};
--bs-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--bs-btn-focus-shadow-rgb), .5);
#### Additional Button Utilities:
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
  
  ## Card
  
--bs-card-spacer-y: #{$card-spacer-y};
--bs-card-spacer-x: #{$card-spacer-x};
--bs-card-title-spacer-y: #{$card-title-spacer-y};
--bs-card-title-color: #{$card-title-color};
--bs-card-subtitle-color: #{$card-subtitle-color};
--bs-card-border-width: #{$card-border-width};
--bs-card-border-color: #{$card-border-color};
--bs-card-border-radius: #{$card-border-radius};
--bs-card-box-shadow: #{$card-box-shadow};
--bs-card-inner-border-radius: #{$card-inner-border-radius};
--bs-card-cap-padding-y: #{$card-cap-padding-y};
--bs-card-cap-padding-x: #{$card-cap-padding-x};
--bs-card-cap-bg: #{$card-cap-bg};
--bs-card-cap-color: #{$card-cap-color};
--bs-card-height: #{$card-height};
--bs-card-color: #{$card-color};
--bs-card-bg: #{$card-bg};
--bs-card-img-overlay-padding: #{$card-img-overlay-padding};
--bs-card-group-margin: #{$card-group-margin};

## Carousel
#### Standard Variables

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;
$carousel-control-icon-filter:       null;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

#### Dark Variables

$carousel-dark-indicator-active-bg:  $black; // Deprecated in v5.3.4
$carousel-dark-caption-color:        $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter:  invert(1) grayscale(100); // Deprecated in v5.3.4

##  Dropdowns
#### Standard Theme

--bs-dropdown-zindex: #{$zindex-dropdown};
--bs-dropdown-min-width: #{$dropdown-min-width};
--bs-dropdown-padding-x: #{$dropdown-padding-x};
--bs-dropdown-padding-y: #{$dropdown-padding-y};
--bs-dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --bs-dropdown-font-size);
--bs-dropdown-color: #{$dropdown-color};
--bs-dropdown-bg: #{$dropdown-bg};
--bs-dropdown-border-color: #{$dropdown-border-color};
--bs-dropdown-border-radius: #{$dropdown-border-radius};
--bs-dropdown-border-width: #{$dropdown-border-width};
--bs-dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--bs-dropdown-divider-bg: #{$dropdown-divider-bg};
--bs-dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--bs-dropdown-box-shadow: #{$dropdown-box-shadow};
--bs-dropdown-link-color: #{$dropdown-link-color};
--bs-dropdown-link-hover-color: #{$dropdown-link-hover-color};
--bs-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--bs-dropdown-link-active-color: #{$dropdown-link-active-color};
--bs-dropdown-link-active-bg: #{$dropdown-link-active-bg};
--bs-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--bs-dropdown-item-padding-x: #{$dropdown-item-padding-x};
--bs-dropdown-item-padding-y: #{$dropdown-item-padding-y};
--bs-dropdown-header-color: #{$dropdown-header-color};
--bs-dropdown-header-padding-x: #{$dropdown-header-padding-x};
--bs-dropdown-header-padding-y: #{$dropdown-header-padding-y};

#### Dark Theme

--bs-dropdown-color: #{$dropdown-dark-color};
--bs-dropdown-bg: #{$dropdown-dark-bg};
--bs-dropdown-border-color: #{$dropdown-dark-border-color};
--bs-dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--bs-dropdown-link-color: #{$dropdown-dark-link-color};
--bs-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--bs-dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--bs-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--bs-dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--bs-dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--bs-dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--bs-dropdown-header-color: #{$dropdown-dark-header-color};

## Modal

--bs-modal-zindex: #{$zindex-modal};
--bs-modal-width: #{$modal-md};
--bs-modal-padding: #{$modal-inner-padding};
--bs-modal-margin: #{$modal-dialog-margin};
--bs-modal-color: #{$modal-content-color};
--bs-modal-bg: #{$modal-content-bg};
--bs-modal-border-color: #{$modal-content-border-color};
--bs-modal-border-width: #{$modal-content-border-width};
--bs-modal-border-radius: #{$modal-content-border-radius};
--bs-modal-box-shadow: #{$modal-content-box-shadow-xs};
--bs-modal-inner-border-radius: #{$modal-content-inner-border-radius};
--bs-modal-header-padding-x: #{$modal-header-padding-x};
--bs-modal-header-padding-y: #{$modal-header-padding-y};
--bs-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--bs-modal-header-border-color: #{$modal-header-border-color};
--bs-modal-header-border-width: #{$modal-header-border-width};
--bs-modal-title-line-height: #{$modal-title-line-height};
--bs-modal-footer-gap: #{$modal-footer-margin-between};
--bs-modal-footer-bg: #{$modal-footer-bg};
--bs-modal-footer-border-color: #{$modal-footer-border-color};
--bs-modal-footer-border-width: #{$modal-footer-border-width};

--bs-backdrop-zindex: #{$zindex-modal-backdrop};
--bs-backdrop-bg: #{$modal-backdrop-bg};
--bs-backdrop-opacity: #{$modal-backdrop-opacity};

## Nav (navbar)

--bs-navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--bs-navbar-padding-y: #{$navbar-padding-y};
--bs-navbar-color: #{$navbar-light-color};
--bs-navbar-hover-color: #{$navbar-light-hover-color};
--bs-navbar-disabled-color: #{$navbar-light-disabled-color};
--bs-navbar-active-color: #{$navbar-light-active-color};
--bs-navbar-brand-padding-y: #{$navbar-brand-padding-y};
--bs-navbar-brand-margin-end: #{$navbar-brand-margin-end};
--bs-navbar-brand-font-size: #{$navbar-brand-font-size};
--bs-navbar-brand-color: #{$navbar-light-brand-color};
--bs-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--bs-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--bs-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--bs-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--bs-navbar-toggler-font-size: #{$navbar-toggler-font-size};
--bs-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--bs-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--bs-navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--bs-navbar-toggler-transition: #{$navbar-toggler-transition};

#### Nav (nav-link)

--bs-nav-link-padding-x: 0;
--bs-nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --bs-nav-link-font-size);
--bs-nav-link-font-weight: #{$nav-link-font-weight};
--bs-nav-link-color: var(--#{$prefix}navbar-color);
--bs-nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--bs-nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

#### Nav Dark Theme

--bs-navbar-color: #{$navbar-dark-color};
--bs-navbar-hover-color: #{$navbar-dark-hover-color};
--bs-navbar-disabled-color: #{$navbar-dark-disabled-color};
--bs-navbar-active-color: #{$navbar-dark-active-color};
--bs-navbar-brand-color: #{$navbar-dark-brand-color};
--bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--bs-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--bs-navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

## Offcanvas

--bs-offcanvas-zindex: #{$zindex-offcanvas};
--bs-offcanvas-width: #{$offcanvas-horizontal-width};
--bs-offcanvas-height: #{$offcanvas-vertical-height};
--bs-offcanvas-padding-x: #{$offcanvas-padding-x};
--bs-offcanvas-padding-y: #{$offcanvas-padding-y};
--bs-offcanvas-color: #{$offcanvas-color};
--bs-offcanvas-bg: #{$offcanvas-bg-color};
--bs-offcanvas-border-width: #{$offcanvas-border-width};
--bs-offcanvas-border-color: #{$offcanvas-border-color};
--bs-offcanvas-box-shadow: #{$offcanvas-box-shadow};
--bs-offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--bs-offcanvas-title-line-height: #{$offcanvas-title-line-height};

##  Form Fields
#### User Input 

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              var(--#{$prefix}body-bg);
$input-disabled-color:                  null;
$input-disabled-bg:                     var(--#{$prefix}secondary-bg);
$input-disabled-border-color:           null;

$input-color:                           var(--#{$prefix}body-color);
$input-border-color:                    var(--#{$prefix}border-color);
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      var(--#{$prefix}box-shadow-inset);

$input-border-radius:                   var(--#{$prefix}border-radius);
$input-border-radius-sm:                var(--#{$prefix}border-radius-sm);
$input-border-radius-lg:                var(--#{$prefix}border-radius-lg);

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               var(--#{$prefix}secondary-color);
$input-plaintext-color:                 var(--#{$prefix}body-color);

$input-height-border:                   calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

#### Form Labels

$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;

#### Form Text

$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       var(--#{$prefix}secondary-color);

#### Form File Input Button

$form-file-button-color:          $input-color;
$form-file-button-bg:             var(--#{$prefix}tertiary-bg);
$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg);

## Form Checkboxes and Radio Buttons

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $focus-ring-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;

#### From Switches

$form-switch-color:               rgba($black, .25);
$form-switch-width:               2em;
$form-switch-padding-start:       $form-switch-width + .5em;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-switch-border-radius:       $form-switch-width;
$form-switch-transition:          background-position .15s ease-in-out;

$form-switch-focus-color:         $input-focus-border-color;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

$form-switch-checked-color:       $component-active-color;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
$form-switch-checked-bg-position: right center;

## Colors
### Theme Colors

$primary:    #0d6efd;
$secondary:  #6c757d;
$success:    #198754;
$info:       #0dcaf0;
$warning:    #ffc107;
$danger:     #dc3545;
$light:      #f8f9fa;
$dark:       #212529;

### Greyscale Colors

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

## Shadows

$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

## Borders

--bs-border-width: #{$border-width};
--bs-border-style: #{$border-style};
--bs-border-color: #{$border-color};
--bs-border-color-translucent: #{$border-color-translucent};

--bs-border-radius: #{$border-radius};
--bs-border-radius-sm: #{$border-radius-sm};
--bs-border-radius-lg: #{$border-radius-lg};
--bs-border-radius-xl: #{$border-radius-xl};
--bs-border-radius-xxl: #{$border-radius-xxl};
--bs-border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
--bs-border-radius-pill: #{$border-radius-pill};

## Font Size

$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-medium:          500;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;