robrez/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<html>

  <!-- this markup is render by script, but sassmeister seems to have trouble with that -->
  <!-- type anything here to force sassmeister to render!! -->

<h2>Bootstrap Color Gist</h2>
<section>
    <div id="demo"></div>
</section>

  <script>
    var colors = [
      'primary',
      'secondary',
      'success',
      'info',
      'warning',
      'danger',
      'create',
      'light',
      'dark',
      'blue',
      'indigo',
      'purple',
      'pink',
      'red',
      'orange',
      'yellow',
      'green',
      'teal',
      'cyan'
    ];
    var content = '';
    colors.forEach( (color) => {
      var example = `
        <div class="example ${color}">${color}</div>
        <div class="example muted ${color}">${color}</div>
      `;
      content = content + example + '\n'
    } );
    document.getElementById('demo').innerHTML = content;
  </script>

</html>

## SassMeister-input.scss
// ----
// libsass (v3.5.4)
// ----

// high-level gist of how bootstrap colors work..
// a color is defined
// for a given color, a number of tints (mix w/ white), shades (mix w/ black), lightnesses/darknesses (the L in HSL)
// are computed and used as needed


// Color contrast
// Covert color to yiq color space to determine if contrast color should be "white" or "black"

@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
}

// Request a color level
// Mixes a color with white or black at a certain percentage

@function color-level($color: $primary, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);
  @return mix($color-base, $color, $level * $theme-color-interval);
}

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

// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;


$blue:          #0d6efd !default;
$indigo:        #6610f2 !default;
$purple:        #6f42c1 !default;
$pink:          #d63384 !default;
$red:           #dc3545 !default;
$orange:        #fd7e14 !default;
$yellow:        #ffc107 !default;
$green:         #28a745 !default;
$teal:          #20c997 !default;
$cyan:          #17a2b8 !default;
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

//CPSI CUSTOMIZATIONS
//CPSI CUSTOMIZATIONS
//CPSI CUSTOMIZATIONS
$primary: #106cc8;
$success: #19ACA4;
$danger: #ED5565;
$info: #31ccec;
$warning: #da882e;
$create: #9EDA2E;

$colors: () !default;
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "create":     $create,
    "light":      $light,
    "dark":       $dark
  ),
  $colors
);

$muted-bg-level: -10 !default;
$muted-border-level: -9 !default;
$muted-contrast-level: 6 !default;

html {
  @each $name, $value in $colors {

    // HERE IS WHERE COMPUTATIONS HAPPEN!
    // HERE IS WHERE COMPUTATIONS HAPPEN!
    // HERE IS WHERE COMPUTATIONS HAPPEN!

    $border: $value;
    $contrast: color-yiq($value);
    $hover: darken($value, 7.5%);
    $hover-border: darken($border, 10%);
    $active: darken($value, 10%);
    $active-border: darken($border, 12.5%);

    $muted: color-level($value, $muted-bg-level);  // mix w/ white at (8% * 10) = 80%
    $muted-border: color-level($value, $muted-border-level); // mix w/ white at (8% * 9) = 72%
    $muted-contrast: color-level($value, $muted-contrast-level); // mix w/ black at (8% * 6) = 48%

    --#{$name}-color: #{$value};
    --#{$name}-border: #{$border};
    --#{$name}-contrast: #{$contrast};
    --#{$name}-hover: #{$hover};
    --#{$name}-hover-border: #{$hover-border};
    --#{$name}-active: #{$active};
    --#{$name}-active-border: #{$active-border};
    --#{$name}-muted: #{$muted};
    --#{$name}-muted-border: #{$muted-border};
    --#{$name}-muted-contrast: #{$muted-contrast};
  }
}

@each $name, $value in $colors {
  .#{$name} {
    --example-color: var(--#{$name}-color);
    --example-border: var(--#{$name}-border);
    --example-contrast: var(--#{$name}-contrast);
    --example-hover: var(--#{$name}-hover);
    --example-hover-border: var(--#{$name}-hover-border);
    --example-active: var(--#{$name}-active);
    --example-active-border: var(--#{$name}-active-border);
    --example-muted: var(--#{$name}-muted);
    --example-muted-border: var(--#{$name}-muted-border);
    --example-muted-contrast: var(--#{$name}-muted-contrast);
  }
}

#demo {
  display: flex;
  flex-wrap: wrap;
}

div.example {
  display: flex;
  padding: 2px 4px;
  align-items:center;
  justify-content: center;
  height: 64px;
  width: 64px;
  max-width: 128px;
  background-color: var(--example-color);
  border: 1px solid var(--example-border);
  color: var(--example-contrast);
  margin: 2px;
  border-radius: 2px;
}

div.example.muted {
  background-color: var(--example-muted);
  border: 1px solid var(--example-muted-border);
  color: var(--example-muted-contrast);
}

div.example:hover {
  background-color: var(--example-hover);
  border: 1px solid var(--example-hover-border);
  color: var(--example-contrast);
}

div.example:active {
  background-color: var(--example-active);
  border: 1px solid var(--example-active-border);
  color: var(--example-contrast);
}

## SassMeister-output.css
html {
  --blue-color: #0d6efd;
  --blue-border: #0d6efd;
  --blue-contrast: #fff;
  --blue-hover: #025ce2;
  --blue-hover-border: #0257d5;
  --blue-active: #0257d5;
  --blue-active-border: #0252c9;
  --blue-muted: #cfe2ff;
  --blue-muted-border: #bbd6fe;
  --blue-muted-contrast: #073984;
  --indigo-color: #6610f2;
  --indigo-border: #6610f2;
  --indigo-contrast: #fff;
  --indigo-hover: #560bd0;
  --indigo-hover-border: #510bc4;
  --indigo-active: #510bc4;
  --indigo-active-border: #4c0ab8;
  --indigo-muted: #e0cffc;
  --indigo-muted-border: #d4bcfb;
  --indigo-muted-contrast: #35087e;
  --purple-color: #6f42c1;
  --purple-border: #6f42c1;
  --purple-contrast: #fff;
  --purple-hover: #5e37a6;
  --purple-hover-border: #59339d;
  --purple-active: #59339d;
  --purple-active-border: #533093;
  --purple-muted: #e2d9f3;
  --purple-muted-border: #d7caee;
  --purple-muted-contrast: #3a2264;
  --pink-color: #d63384;
  --pink-border: #d63384;
  --pink-contrast: #fff;
  --pink-hover: #bd2671;
  --pink-hover-border: #b2246b;
  --pink-active: #b2246b;
  --pink-active-border: #a82264;
  --pink-muted: #f7d6e6;
  --pink-muted-border: #f4c6dd;
  --pink-muted-contrast: #6f1b45;
  --red-color: #dc3545;
  --red-border: #dc3545;
  --red-contrast: #fff;
  --red-hover: #c82333;
  --red-hover-border: #bd2130;
  --red-active: #bd2130;
  --red-active-border: #b21f2d;
  --red-muted: #f8d7da;
  --red-muted-border: #f5c6cb;
  --red-muted-contrast: #721c24;
  --orange-color: #fd7e14;
  --orange-border: #fd7e14;
  --orange-contrast: #212529;
  --orange-hover: #e96b02;
  --orange-hover-border: #dc6502;
  --orange-active: #dc6502;
  --orange-active-border: #cf5f02;
  --orange-muted: #ffe5d0;
  --orange-muted-border: #fedbbd;
  --orange-muted-contrast: #84420a;
  --yellow-color: #ffc107;
  --yellow-border: #ffc107;
  --yellow-contrast: #212529;
  --yellow-hover: #e0a800;
  --yellow-hover-border: #d39e00;
  --yellow-active: #d39e00;
  --yellow-active-border: #c69500;
  --yellow-muted: #fff3cd;
  --yellow-muted-border: #ffeeba;
  --yellow-muted-contrast: #856404;
  --green-color: #28a745;
  --green-border: #28a745;
  --green-contrast: #fff;
  --green-hover: #218838;
  --green-hover-border: #1e7e34;
  --green-active: #1e7e34;
  --green-active-border: #1c7430;
  --green-muted: #d4edda;
  --green-muted-border: #c3e6cb;
  --green-muted-contrast: #155724;
  --teal-color: #20c997;
  --teal-border: #20c997;
  --teal-contrast: #fff;
  --teal-hover: #1ba87e;
  --teal-hover-border: #199d76;
  --teal-active: #199d76;
  --teal-active-border: #17926e;
  --teal-muted: #d2f4ea;
  --teal-muted-border: #c1f0e2;
  --teal-muted-contrast: #11694f;
  --cyan-color: #17a2b8;
  --cyan-border: #17a2b8;
  --cyan-contrast: #fff;
  --cyan-hover: #138496;
  --cyan-hover-border: #117a8b;
  --cyan-active: #117a8b;
  --cyan-active-border: #10707f;
  --cyan-muted: #d1ecf1;
  --cyan-muted-border: #bee5eb;
  --cyan-muted-contrast: #0c5460;
  --primary-color: #106cc8;
  --primary-border: #106cc8;
  --primary-contrast: #fff;
  --primary-hover: #0d59a5;
  --primary-hover-border: #0c5399;
  --primary-active: #0c5399;
  --primary-active-border: #0b4c8d;
  --primary-muted: #cfe2f4;
  --primary-muted-border: #bcd6f0;
  --primary-muted-contrast: #083868;
  --secondary-color: #6c757d;
  --secondary-border: #6c757d;
  --secondary-contrast: #fff;
  --secondary-hover: #5a6268;
  --secondary-hover-border: #545b62;
  --secondary-active: #545b62;
  --secondary-active-border: #4e555b;
  --secondary-muted: #e2e3e5;
  --secondary-muted-border: #d6d8db;
  --secondary-muted-contrast: #383d41;
  --success-color: #19ACA4;
  --success-border: #19ACA4;
  --success-contrast: #fff;
  --success-hover: #148b84;
  --success-hover-border: #137f7a;
  --success-active: #137f7a;
  --success-active-border: #11746f;
  --success-muted: #d1eeed;
  --success-muted-border: #bfe8e6;
  --success-muted-contrast: #0d5955;
  --info-color: #31ccec;
  --info-border: #31ccec;
  --info-contrast: #212529;
  --info-hover: #15bfe2;
  --info-hover-border: #14b5d6;
  --info-active: #14b5d6;
  --info-active-border: #13abcb;
  --info-muted: #d6f5fb;
  --info-muted-border: #c5f1fa;
  --info-muted-contrast: #196a7b;
  --warning-color: #da882e;
  --warning-border: #da882e;
  --warning-contrast: #212529;
  --warning-hover: #c07522;
  --warning-hover-border: #b56e20;
  --warning-active: #b56e20;
  --warning-active-border: #aa671e;
  --warning-muted: #f8e7d5;
  --warning-muted-border: #f5dec4;
  --warning-muted-contrast: #714718;
  --danger-color: #ED5565;
  --danger-border: #ED5565;
  --danger-contrast: #fff;
  --danger-hover: #e93246;
  --danger-hover-border: #e8273b;
  --danger-active: #e8273b;
  --danger-active-border: #e71b31;
  --danger-muted: #fbdde0;
  --danger-muted-border: #facfd4;
  --danger-muted-contrast: #7b2c35;
  --create-color: #9EDA2E;
  --create-border: #9EDA2E;
  --create-contrast: #212529;
  --create-hover: #89c022;
  --create-hover-border: #81b520;
  --create-active: #81b520;
  --create-active-border: #79aa1e;
  --create-muted: #ecf8d5;
  --create-muted-border: #e4f5c4;
  --create-muted-contrast: #527118;
  --light-color: #f8f9fa;
  --light-border: #f8f9fa;
  --light-contrast: #212529;
  --light-hover: #e2e6ea;
  --light-hover-border: #dae0e5;
  --light-active: #dae0e5;
  --light-active-border: #d3d9df;
  --light-muted: #fefefe;
  --light-muted-border: #fdfdfe;
  --light-muted-contrast: #818182;
  --dark-color: #343a40;
  --dark-border: #343a40;
  --dark-contrast: #fff;
  --dark-hover: #23272b;
  --dark-hover-border: #1d2124;
  --dark-active: #1d2124;
  --dark-active-border: #171a1d;
  --dark-muted: #d6d8d9;
  --dark-muted-border: #c6c8ca;
  --dark-muted-contrast: #1b1e21;
}

.blue {
  --example-color: var(--blue-color);
  --example-border: var(--blue-border);
  --example-contrast: var(--blue-contrast);
  --example-hover: var(--blue-hover);
  --example-hover-border: var(--blue-hover-border);
  --example-active: var(--blue-active);
  --example-active-border: var(--blue-active-border);
  --example-muted: var(--blue-muted);
  --example-muted-border: var(--blue-muted-border);
  --example-muted-contrast: var(--blue-muted-contrast);
}

.indigo {
  --example-color: var(--indigo-color);
  --example-border: var(--indigo-border);
  --example-contrast: var(--indigo-contrast);
  --example-hover: var(--indigo-hover);
  --example-hover-border: var(--indigo-hover-border);
  --example-active: var(--indigo-active);
  --example-active-border: var(--indigo-active-border);
  --example-muted: var(--indigo-muted);
  --example-muted-border: var(--indigo-muted-border);
  --example-muted-contrast: var(--indigo-muted-contrast);
}

.purple {
  --example-color: var(--purple-color);
  --example-border: var(--purple-border);
  --example-contrast: var(--purple-contrast);
  --example-hover: var(--purple-hover);
  --example-hover-border: var(--purple-hover-border);
  --example-active: var(--purple-active);
  --example-active-border: var(--purple-active-border);
  --example-muted: var(--purple-muted);
  --example-muted-border: var(--purple-muted-border);
  --example-muted-contrast: var(--purple-muted-contrast);
}

.pink {
  --example-color: var(--pink-color);
  --example-border: var(--pink-border);
  --example-contrast: var(--pink-contrast);
  --example-hover: var(--pink-hover);
  --example-hover-border: var(--pink-hover-border);
  --example-active: var(--pink-active);
  --example-active-border: var(--pink-active-border);
  --example-muted: var(--pink-muted);
  --example-muted-border: var(--pink-muted-border);
  --example-muted-contrast: var(--pink-muted-contrast);
}

.red {
  --example-color: var(--red-color);
  --example-border: var(--red-border);
  --example-contrast: var(--red-contrast);
  --example-hover: var(--red-hover);
  --example-hover-border: var(--red-hover-border);
  --example-active: var(--red-active);
  --example-active-border: var(--red-active-border);
  --example-muted: var(--red-muted);
  --example-muted-border: var(--red-muted-border);
  --example-muted-contrast: var(--red-muted-contrast);
}

.orange {
  --example-color: var(--orange-color);
  --example-border: var(--orange-border);
  --example-contrast: var(--orange-contrast);
  --example-hover: var(--orange-hover);
  --example-hover-border: var(--orange-hover-border);
  --example-active: var(--orange-active);
  --example-active-border: var(--orange-active-border);
  --example-muted: var(--orange-muted);
  --example-muted-border: var(--orange-muted-border);
  --example-muted-contrast: var(--orange-muted-contrast);
}

.yellow {
  --example-color: var(--yellow-color);
  --example-border: var(--yellow-border);
  --example-contrast: var(--yellow-contrast);
  --example-hover: var(--yellow-hover);
  --example-hover-border: var(--yellow-hover-border);
  --example-active: var(--yellow-active);
  --example-active-border: var(--yellow-active-border);
  --example-muted: var(--yellow-muted);
  --example-muted-border: var(--yellow-muted-border);
  --example-muted-contrast: var(--yellow-muted-contrast);
}

.green {
  --example-color: var(--green-color);
  --example-border: var(--green-border);
  --example-contrast: var(--green-contrast);
  --example-hover: var(--green-hover);
  --example-hover-border: var(--green-hover-border);
  --example-active: var(--green-active);
  --example-active-border: var(--green-active-border);
  --example-muted: var(--green-muted);
  --example-muted-border: var(--green-muted-border);
  --example-muted-contrast: var(--green-muted-contrast);
}

.teal {
  --example-color: var(--teal-color);
  --example-border: var(--teal-border);
  --example-contrast: var(--teal-contrast);
  --example-hover: var(--teal-hover);
  --example-hover-border: var(--teal-hover-border);
  --example-active: var(--teal-active);
  --example-active-border: var(--teal-active-border);
  --example-muted: var(--teal-muted);
  --example-muted-border: var(--teal-muted-border);
  --example-muted-contrast: var(--teal-muted-contrast);
}

.cyan {
  --example-color: var(--cyan-color);
  --example-border: var(--cyan-border);
  --example-contrast: var(--cyan-contrast);
  --example-hover: var(--cyan-hover);
  --example-hover-border: var(--cyan-hover-border);
  --example-active: var(--cyan-active);
  --example-active-border: var(--cyan-active-border);
  --example-muted: var(--cyan-muted);
  --example-muted-border: var(--cyan-muted-border);
  --example-muted-contrast: var(--cyan-muted-contrast);
}

.primary {
  --example-color: var(--primary-color);
  --example-border: var(--primary-border);
  --example-contrast: var(--primary-contrast);
  --example-hover: var(--primary-hover);
  --example-hover-border: var(--primary-hover-border);
  --example-active: var(--primary-active);
  --example-active-border: var(--primary-active-border);
  --example-muted: var(--primary-muted);
  --example-muted-border: var(--primary-muted-border);
  --example-muted-contrast: var(--primary-muted-contrast);
}

.secondary {
  --example-color: var(--secondary-color);
  --example-border: var(--secondary-border);
  --example-contrast: var(--secondary-contrast);
  --example-hover: var(--secondary-hover);
  --example-hover-border: var(--secondary-hover-border);
  --example-active: var(--secondary-active);
  --example-active-border: var(--secondary-active-border);
  --example-muted: var(--secondary-muted);
  --example-muted-border: var(--secondary-muted-border);
  --example-muted-contrast: var(--secondary-muted-contrast);
}

.success {
  --example-color: var(--success-color);
  --example-border: var(--success-border);
  --example-contrast: var(--success-contrast);
  --example-hover: var(--success-hover);
  --example-hover-border: var(--success-hover-border);
  --example-active: var(--success-active);
  --example-active-border: var(--success-active-border);
  --example-muted: var(--success-muted);
  --example-muted-border: var(--success-muted-border);
  --example-muted-contrast: var(--success-muted-contrast);
}

.info {
  --example-color: var(--info-color);
  --example-border: var(--info-border);
  --example-contrast: var(--info-contrast);
  --example-hover: var(--info-hover);
  --example-hover-border: var(--info-hover-border);
  --example-active: var(--info-active);
  --example-active-border: var(--info-active-border);
  --example-muted: var(--info-muted);
  --example-muted-border: var(--info-muted-border);
  --example-muted-contrast: var(--info-muted-contrast);
}

.warning {
  --example-color: var(--warning-color);
  --example-border: var(--warning-border);
  --example-contrast: var(--warning-contrast);
  --example-hover: var(--warning-hover);
  --example-hover-border: var(--warning-hover-border);
  --example-active: var(--warning-active);
  --example-active-border: var(--warning-active-border);
  --example-muted: var(--warning-muted);
  --example-muted-border: var(--warning-muted-border);
  --example-muted-contrast: var(--warning-muted-contrast);
}

.danger {
  --example-color: var(--danger-color);
  --example-border: var(--danger-border);
  --example-contrast: var(--danger-contrast);
  --example-hover: var(--danger-hover);
  --example-hover-border: var(--danger-hover-border);
  --example-active: var(--danger-active);
  --example-active-border: var(--danger-active-border);
  --example-muted: var(--danger-muted);
  --example-muted-border: var(--danger-muted-border);
  --example-muted-contrast: var(--danger-muted-contrast);
}

.create {
  --example-color: var(--create-color);
  --example-border: var(--create-border);
  --example-contrast: var(--create-contrast);
  --example-hover: var(--create-hover);
  --example-hover-border: var(--create-hover-border);
  --example-active: var(--create-active);
  --example-active-border: var(--create-active-border);
  --example-muted: var(--create-muted);
  --example-muted-border: var(--create-muted-border);
  --example-muted-contrast: var(--create-muted-contrast);
}

.light {
  --example-color: var(--light-color);
  --example-border: var(--light-border);
  --example-contrast: var(--light-contrast);
  --example-hover: var(--light-hover);
  --example-hover-border: var(--light-hover-border);
  --example-active: var(--light-active);
  --example-active-border: var(--light-active-border);
  --example-muted: var(--light-muted);
  --example-muted-border: var(--light-muted-border);
  --example-muted-contrast: var(--light-muted-contrast);
}

.dark {
  --example-color: var(--dark-color);
  --example-border: var(--dark-border);
  --example-contrast: var(--dark-contrast);
  --example-hover: var(--dark-hover);
  --example-hover-border: var(--dark-hover-border);
  --example-active: var(--dark-active);
  --example-active-border: var(--dark-active-border);
  --example-muted: var(--dark-muted);
  --example-muted-border: var(--dark-muted-border);
  --example-muted-contrast: var(--dark-muted-contrast);
}

#demo {
  display: flex;
  flex-wrap: wrap;
}

div.example {
  display: flex;
  padding: 2px 4px;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  max-width: 128px;
  background-color: var(--example-color);
  border: 1px solid var(--example-border);
  color: var(--example-contrast);
  margin: 2px;
  border-radius: 2px;
}

div.example.muted {
  background-color: var(--example-muted);
  border: 1px solid var(--example-muted-border);
  color: var(--example-muted-contrast);
}

div.example:hover {
  background-color: var(--example-hover);
  border: 1px solid var(--example-hover-border);
  color: var(--example-contrast);
}

div.example:active {
  background-color: var(--example-active);
  border: 1px solid var(--example-active-border);
  color: var(--example-contrast);
}

## SassMeister-rendered.html
<html>

  <!-- this markup is render by script, but sassmeister seems to have trouble with that -->
  <!-- type anything here to force sassmeister to render!! -->

<h2>Bootstrap Color Gist</h2>
<section>
    <div id="demo"></div>
</section>

  <script>
    var colors = [
      'primary',
      'secondary',
      'success',
      'info',
      'warning',
      'danger',
      'create',
      'light',
      'dark',
      'blue',
      'indigo',
      'purple',
      'pink',
      'red',
      'orange',
      'yellow',
      'green',
      'teal',
      'cyan'
    ];
    var content = '';
    colors.forEach( (color) => {
      var example = `
        <div class="example ${color}">${color}</div>
        <div class="example muted ${color}">${color}</div>
      `;
      content = content + example + '\n'
    } );
    document.getElementById('demo').innerHTML = content;
  </script>

</html>
	<html>

	<!-- this markup is render by script, but sassmeister seems to have trouble with that -->
	<!-- type anything here to force sassmeister to render!! -->

	<h2>Bootstrap Color Gist</h2>
	<section>
	<div id="demo"></div>
	</section>

	<script>
	var colors = [
	'primary',
	'secondary',
	'success',
	'info',
	'warning',
	'danger',
	'create',
	'light',
	'dark',
	'blue',
	'indigo',
	'purple',
	'pink',
	'red',
	'orange',
	'yellow',
	'green',
	'teal',
	'cyan'
	];
	var content = '';
	colors.forEach( (color) => {
	var example = `
	<div class="example ${color}">${color}</div>
	<div class="example muted ${color}">${color}</div>
	`;
	content = content + example + '\n'
	} );
	document.getElementById('demo').innerHTML = content;
	</script>

	</html>
	// ----
	// libsass (v3.5.4)
	// ----

	// high-level gist of how bootstrap colors work..
	// a color is defined
	// for a given color, a number of tints (mix w/ white), shades (mix w/ black), lightnesses/darknesses (the L in HSL)
	// are computed and used as needed


	// Color contrast
	// Covert color to yiq color space to determine if contrast color should be "white" or "black"

	@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
	$r: red($color);
	$g: green($color);
	$b: blue($color);

	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

	@return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
	}

	// Request a color level
	// Mixes a color with white or black at a certain percentage

	@function color-level($color: $primary, $level: 0) {
	$color-base: if($level > 0, $black, $white);
	$level: abs($level);
	@return mix($color-base, $color, $level * $theme-color-interval);
	}

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

	// Set a specific jump point for requesting color jumps
	$theme-color-interval: 8% !default;

	// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
	$yiq-contrasted-threshold: 150 !default;

	// Customize the light and dark text colors for use in our YIQ color contrast function.
	$yiq-text-dark: $gray-900 !default;
	$yiq-text-light: $white !default;


	$blue: #0d6efd !default;
	$indigo: #6610f2 !default;
	$purple: #6f42c1 !default;
	$pink: #d63384 !default;
	$red: #dc3545 !default;
	$orange: #fd7e14 !default;
	$yellow: #ffc107 !default;
	$green: #28a745 !default;
	$teal: #20c997 !default;
	$cyan: #17a2b8 !default;
	$primary: $blue !default;
	$secondary: $gray-600 !default;
	$success: $green !default;
	$info: $cyan !default;
	$warning: $yellow !default;
	$danger: $red !default;
	$light: $gray-100 !default;
	$dark: $gray-800 !default;

	//CPSI CUSTOMIZATIONS
	//CPSI CUSTOMIZATIONS
	//CPSI CUSTOMIZATIONS
	$primary: #106cc8;
	$success: #19ACA4;
	$danger: #ED5565;
	$info: #31ccec;
	$warning: #da882e;
	$create: #9EDA2E;

	$colors: () !default;
	$colors: map-merge(
	(
	"blue": $blue,
	"indigo": $indigo,
	"purple": $purple,
	"pink": $pink,
	"red": $red,
	"orange": $orange,
	"yellow": $yellow,
	"green": $green,
	"teal": $teal,
	"cyan": $cyan,
	"primary": $primary,
	"secondary": $secondary,
	"success": $success,
	"info": $info,
	"warning": $warning,
	"danger": $danger,
	"create": $create,
	"light": $light,
	"dark": $dark
	),
	$colors
	);

	$muted-bg-level: -10 !default;
	$muted-border-level: -9 !default;
	$muted-contrast-level: 6 !default;

	html {
	@each $name, $value in $colors {

	// HERE IS WHERE COMPUTATIONS HAPPEN!
	// HERE IS WHERE COMPUTATIONS HAPPEN!
	// HERE IS WHERE COMPUTATIONS HAPPEN!

	$border: $value;
	$contrast: color-yiq($value);
	$hover: darken($value, 7.5%);
	$hover-border: darken($border, 10%);
	$active: darken($value, 10%);
	$active-border: darken($border, 12.5%);

	$muted: color-level($value, $muted-bg-level); // mix w/ white at (8% * 10) = 80%
	$muted-border: color-level($value, $muted-border-level); // mix w/ white at (8% * 9) = 72%
	$muted-contrast: color-level($value, $muted-contrast-level); // mix w/ black at (8% * 6) = 48%

	--#{$name}-color: #{$value};
	--#{$name}-border: #{$border};
	--#{$name}-contrast: #{$contrast};
	--#{$name}-hover: #{$hover};
	--#{$name}-hover-border: #{$hover-border};
	--#{$name}-active: #{$active};
	--#{$name}-active-border: #{$active-border};
	--#{$name}-muted: #{$muted};
	--#{$name}-muted-border: #{$muted-border};
	--#{$name}-muted-contrast: #{$muted-contrast};
	}
	}

	@each $name, $value in $colors {
	.#{$name} {
	--example-color: var(--#{$name}-color);
	--example-border: var(--#{$name}-border);
	--example-contrast: var(--#{$name}-contrast);
	--example-hover: var(--#{$name}-hover);
	--example-hover-border: var(--#{$name}-hover-border);
	--example-active: var(--#{$name}-active);
	--example-active-border: var(--#{$name}-active-border);
	--example-muted: var(--#{$name}-muted);
	--example-muted-border: var(--#{$name}-muted-border);
	--example-muted-contrast: var(--#{$name}-muted-contrast);
	}
	}

	#demo {
	display: flex;
	flex-wrap: wrap;
	}

	div.example {
	display: flex;
	padding: 2px 4px;
	align-items:center;
	justify-content: center;
	height: 64px;
	width: 64px;
	max-width: 128px;
	background-color: var(--example-color);
	border: 1px solid var(--example-border);
	color: var(--example-contrast);
	margin: 2px;
	border-radius: 2px;
	}

	div.example.muted {
	background-color: var(--example-muted);
	border: 1px solid var(--example-muted-border);
	color: var(--example-muted-contrast);
	}

	div.example:hover {
	background-color: var(--example-hover);
	border: 1px solid var(--example-hover-border);
	color: var(--example-contrast);
	}

	div.example:active {
	background-color: var(--example-active);
	border: 1px solid var(--example-active-border);
	color: var(--example-contrast);
	}
	html {
	--blue-color: #0d6efd;
	--blue-border: #0d6efd;
	--blue-contrast: #fff;
	--blue-hover: #025ce2;
	--blue-hover-border: #0257d5;
	--blue-active: #0257d5;
	--blue-active-border: #0252c9;
	--blue-muted: #cfe2ff;
	--blue-muted-border: #bbd6fe;
	--blue-muted-contrast: #073984;
	--indigo-color: #6610f2;
	--indigo-border: #6610f2;
	--indigo-contrast: #fff;
	--indigo-hover: #560bd0;
	--indigo-hover-border: #510bc4;
	--indigo-active: #510bc4;
	--indigo-active-border: #4c0ab8;
	--indigo-muted: #e0cffc;
	--indigo-muted-border: #d4bcfb;
	--indigo-muted-contrast: #35087e;
	--purple-color: #6f42c1;
	--purple-border: #6f42c1;
	--purple-contrast: #fff;
	--purple-hover: #5e37a6;
	--purple-hover-border: #59339d;
	--purple-active: #59339d;
	--purple-active-border: #533093;
	--purple-muted: #e2d9f3;
	--purple-muted-border: #d7caee;
	--purple-muted-contrast: #3a2264;
	--pink-color: #d63384;
	--pink-border: #d63384;
	--pink-contrast: #fff;
	--pink-hover: #bd2671;
	--pink-hover-border: #b2246b;
	--pink-active: #b2246b;
	--pink-active-border: #a82264;
	--pink-muted: #f7d6e6;
	--pink-muted-border: #f4c6dd;
	--pink-muted-contrast: #6f1b45;
	--red-color: #dc3545;
	--red-border: #dc3545;
	--red-contrast: #fff;
	--red-hover: #c82333;
	--red-hover-border: #bd2130;
	--red-active: #bd2130;
	--red-active-border: #b21f2d;
	--red-muted: #f8d7da;
	--red-muted-border: #f5c6cb;
	--red-muted-contrast: #721c24;
	--orange-color: #fd7e14;
	--orange-border: #fd7e14;
	--orange-contrast: #212529;
	--orange-hover: #e96b02;
	--orange-hover-border: #dc6502;
	--orange-active: #dc6502;
	--orange-active-border: #cf5f02;
	--orange-muted: #ffe5d0;
	--orange-muted-border: #fedbbd;
	--orange-muted-contrast: #84420a;
	--yellow-color: #ffc107;
	--yellow-border: #ffc107;
	--yellow-contrast: #212529;
	--yellow-hover: #e0a800;
	--yellow-hover-border: #d39e00;
	--yellow-active: #d39e00;
	--yellow-active-border: #c69500;
	--yellow-muted: #fff3cd;
	--yellow-muted-border: #ffeeba;
	--yellow-muted-contrast: #856404;
	--green-color: #28a745;
	--green-border: #28a745;
	--green-contrast: #fff;
	--green-hover: #218838;
	--green-hover-border: #1e7e34;
	--green-active: #1e7e34;
	--green-active-border: #1c7430;
	--green-muted: #d4edda;
	--green-muted-border: #c3e6cb;
	--green-muted-contrast: #155724;
	--teal-color: #20c997;
	--teal-border: #20c997;
	--teal-contrast: #fff;
	--teal-hover: #1ba87e;
	--teal-hover-border: #199d76;
	--teal-active: #199d76;
	--teal-active-border: #17926e;
	--teal-muted: #d2f4ea;
	--teal-muted-border: #c1f0e2;
	--teal-muted-contrast: #11694f;
	--cyan-color: #17a2b8;
	--cyan-border: #17a2b8;
	--cyan-contrast: #fff;
	--cyan-hover: #138496;
	--cyan-hover-border: #117a8b;
	--cyan-active: #117a8b;
	--cyan-active-border: #10707f;
	--cyan-muted: #d1ecf1;
	--cyan-muted-border: #bee5eb;
	--cyan-muted-contrast: #0c5460;
	--primary-color: #106cc8;
	--primary-border: #106cc8;
	--primary-contrast: #fff;
	--primary-hover: #0d59a5;
	--primary-hover-border: #0c5399;
	--primary-active: #0c5399;
	--primary-active-border: #0b4c8d;
	--primary-muted: #cfe2f4;
	--primary-muted-border: #bcd6f0;
	--primary-muted-contrast: #083868;
	--secondary-color: #6c757d;
	--secondary-border: #6c757d;
	--secondary-contrast: #fff;
	--secondary-hover: #5a6268;
	--secondary-hover-border: #545b62;
	--secondary-active: #545b62;
	--secondary-active-border: #4e555b;
	--secondary-muted: #e2e3e5;
	--secondary-muted-border: #d6d8db;
	--secondary-muted-contrast: #383d41;
	--success-color: #19ACA4;
	--success-border: #19ACA4;
	--success-contrast: #fff;
	--success-hover: #148b84;
	--success-hover-border: #137f7a;
	--success-active: #137f7a;
	--success-active-border: #11746f;
	--success-muted: #d1eeed;
	--success-muted-border: #bfe8e6;
	--success-muted-contrast: #0d5955;
	--info-color: #31ccec;
	--info-border: #31ccec;
	--info-contrast: #212529;
	--info-hover: #15bfe2;
	--info-hover-border: #14b5d6;
	--info-active: #14b5d6;
	--info-active-border: #13abcb;
	--info-muted: #d6f5fb;
	--info-muted-border: #c5f1fa;
	--info-muted-contrast: #196a7b;
	--warning-color: #da882e;
	--warning-border: #da882e;
	--warning-contrast: #212529;
	--warning-hover: #c07522;
	--warning-hover-border: #b56e20;
	--warning-active: #b56e20;
	--warning-active-border: #aa671e;
	--warning-muted: #f8e7d5;
	--warning-muted-border: #f5dec4;
	--warning-muted-contrast: #714718;
	--danger-color: #ED5565;
	--danger-border: #ED5565;
	--danger-contrast: #fff;
	--danger-hover: #e93246;
	--danger-hover-border: #e8273b;
	--danger-active: #e8273b;
	--danger-active-border: #e71b31;
	--danger-muted: #fbdde0;
	--danger-muted-border: #facfd4;
	--danger-muted-contrast: #7b2c35;
	--create-color: #9EDA2E;
	--create-border: #9EDA2E;
	--create-contrast: #212529;
	--create-hover: #89c022;
	--create-hover-border: #81b520;
	--create-active: #81b520;
	--create-active-border: #79aa1e;
	--create-muted: #ecf8d5;
	--create-muted-border: #e4f5c4;
	--create-muted-contrast: #527118;
	--light-color: #f8f9fa;
	--light-border: #f8f9fa;
	--light-contrast: #212529;
	--light-hover: #e2e6ea;
	--light-hover-border: #dae0e5;
	--light-active: #dae0e5;
	--light-active-border: #d3d9df;
	--light-muted: #fefefe;
	--light-muted-border: #fdfdfe;
	--light-muted-contrast: #818182;
	--dark-color: #343a40;
	--dark-border: #343a40;
	--dark-contrast: #fff;
	--dark-hover: #23272b;
	--dark-hover-border: #1d2124;
	--dark-active: #1d2124;
	--dark-active-border: #171a1d;
	--dark-muted: #d6d8d9;
	--dark-muted-border: #c6c8ca;
	--dark-muted-contrast: #1b1e21;
	}

	.blue {
	--example-color: var(--blue-color);
	--example-border: var(--blue-border);
	--example-contrast: var(--blue-contrast);
	--example-hover: var(--blue-hover);
	--example-hover-border: var(--blue-hover-border);
	--example-active: var(--blue-active);
	--example-active-border: var(--blue-active-border);
	--example-muted: var(--blue-muted);
	--example-muted-border: var(--blue-muted-border);
	--example-muted-contrast: var(--blue-muted-contrast);
	}

	.indigo {
	--example-color: var(--indigo-color);
	--example-border: var(--indigo-border);
	--example-contrast: var(--indigo-contrast);
	--example-hover: var(--indigo-hover);
	--example-hover-border: var(--indigo-hover-border);
	--example-active: var(--indigo-active);
	--example-active-border: var(--indigo-active-border);
	--example-muted: var(--indigo-muted);
	--example-muted-border: var(--indigo-muted-border);
	--example-muted-contrast: var(--indigo-muted-contrast);
	}

	.purple {
	--example-color: var(--purple-color);
	--example-border: var(--purple-border);
	--example-contrast: var(--purple-contrast);
	--example-hover: var(--purple-hover);
	--example-hover-border: var(--purple-hover-border);
	--example-active: var(--purple-active);
	--example-active-border: var(--purple-active-border);
	--example-muted: var(--purple-muted);
	--example-muted-border: var(--purple-muted-border);
	--example-muted-contrast: var(--purple-muted-contrast);
	}

	.pink {
	--example-color: var(--pink-color);
	--example-border: var(--pink-border);
	--example-contrast: var(--pink-contrast);
	--example-hover: var(--pink-hover);
	--example-hover-border: var(--pink-hover-border);
	--example-active: var(--pink-active);
	--example-active-border: var(--pink-active-border);
	--example-muted: var(--pink-muted);
	--example-muted-border: var(--pink-muted-border);
	--example-muted-contrast: var(--pink-muted-contrast);
	}

	.red {
	--example-color: var(--red-color);
	--example-border: var(--red-border);
	--example-contrast: var(--red-contrast);
	--example-hover: var(--red-hover);
	--example-hover-border: var(--red-hover-border);
	--example-active: var(--red-active);
	--example-active-border: var(--red-active-border);
	--example-muted: var(--red-muted);
	--example-muted-border: var(--red-muted-border);
	--example-muted-contrast: var(--red-muted-contrast);
	}

	.orange {
	--example-color: var(--orange-color);
	--example-border: var(--orange-border);
	--example-contrast: var(--orange-contrast);
	--example-hover: var(--orange-hover);
	--example-hover-border: var(--orange-hover-border);
	--example-active: var(--orange-active);
	--example-active-border: var(--orange-active-border);
	--example-muted: var(--orange-muted);
	--example-muted-border: var(--orange-muted-border);
	--example-muted-contrast: var(--orange-muted-contrast);
	}

	.yellow {
	--example-color: var(--yellow-color);
	--example-border: var(--yellow-border);
	--example-contrast: var(--yellow-contrast);
	--example-hover: var(--yellow-hover);
	--example-hover-border: var(--yellow-hover-border);
	--example-active: var(--yellow-active);
	--example-active-border: var(--yellow-active-border);
	--example-muted: var(--yellow-muted);
	--example-muted-border: var(--yellow-muted-border);
	--example-muted-contrast: var(--yellow-muted-contrast);
	}

	.green {
	--example-color: var(--green-color);
	--example-border: var(--green-border);
	--example-contrast: var(--green-contrast);
	--example-hover: var(--green-hover);
	--example-hover-border: var(--green-hover-border);
	--example-active: var(--green-active);
	--example-active-border: var(--green-active-border);
	--example-muted: var(--green-muted);
	--example-muted-border: var(--green-muted-border);
	--example-muted-contrast: var(--green-muted-contrast);
	}

	.teal {
	--example-color: var(--teal-color);
	--example-border: var(--teal-border);
	--example-contrast: var(--teal-contrast);
	--example-hover: var(--teal-hover);
	--example-hover-border: var(--teal-hover-border);
	--example-active: var(--teal-active);
	--example-active-border: var(--teal-active-border);
	--example-muted: var(--teal-muted);
	--example-muted-border: var(--teal-muted-border);
	--example-muted-contrast: var(--teal-muted-contrast);
	}

	.cyan {
	--example-color: var(--cyan-color);
	--example-border: var(--cyan-border);
	--example-contrast: var(--cyan-contrast);
	--example-hover: var(--cyan-hover);
	--example-hover-border: var(--cyan-hover-border);
	--example-active: var(--cyan-active);
	--example-active-border: var(--cyan-active-border);
	--example-muted: var(--cyan-muted);
	--example-muted-border: var(--cyan-muted-border);
	--example-muted-contrast: var(--cyan-muted-contrast);
	}

	.primary {
	--example-color: var(--primary-color);
	--example-border: var(--primary-border);
	--example-contrast: var(--primary-contrast);
	--example-hover: var(--primary-hover);
	--example-hover-border: var(--primary-hover-border);
	--example-active: var(--primary-active);
	--example-active-border: var(--primary-active-border);
	--example-muted: var(--primary-muted);
	--example-muted-border: var(--primary-muted-border);
	--example-muted-contrast: var(--primary-muted-contrast);
	}

	.secondary {
	--example-color: var(--secondary-color);
	--example-border: var(--secondary-border);
	--example-contrast: var(--secondary-contrast);
	--example-hover: var(--secondary-hover);
	--example-hover-border: var(--secondary-hover-border);
	--example-active: var(--secondary-active);
	--example-active-border: var(--secondary-active-border);
	--example-muted: var(--secondary-muted);
	--example-muted-border: var(--secondary-muted-border);
	--example-muted-contrast: var(--secondary-muted-contrast);
	}

	.success {
	--example-color: var(--success-color);
	--example-border: var(--success-border);
	--example-contrast: var(--success-contrast);
	--example-hover: var(--success-hover);
	--example-hover-border: var(--success-hover-border);
	--example-active: var(--success-active);
	--example-active-border: var(--success-active-border);
	--example-muted: var(--success-muted);
	--example-muted-border: var(--success-muted-border);
	--example-muted-contrast: var(--success-muted-contrast);
	}

	.info {
	--example-color: var(--info-color);
	--example-border: var(--info-border);
	--example-contrast: var(--info-contrast);
	--example-hover: var(--info-hover);
	--example-hover-border: var(--info-hover-border);
	--example-active: var(--info-active);
	--example-active-border: var(--info-active-border);
	--example-muted: var(--info-muted);
	--example-muted-border: var(--info-muted-border);
	--example-muted-contrast: var(--info-muted-contrast);
	}

	.warning {
	--example-color: var(--warning-color);
	--example-border: var(--warning-border);
	--example-contrast: var(--warning-contrast);
	--example-hover: var(--warning-hover);
	--example-hover-border: var(--warning-hover-border);
	--example-active: var(--warning-active);
	--example-active-border: var(--warning-active-border);
	--example-muted: var(--warning-muted);
	--example-muted-border: var(--warning-muted-border);
	--example-muted-contrast: var(--warning-muted-contrast);
	}

	.danger {
	--example-color: var(--danger-color);
	--example-border: var(--danger-border);
	--example-contrast: var(--danger-contrast);
	--example-hover: var(--danger-hover);
	--example-hover-border: var(--danger-hover-border);
	--example-active: var(--danger-active);
	--example-active-border: var(--danger-active-border);
	--example-muted: var(--danger-muted);
	--example-muted-border: var(--danger-muted-border);
	--example-muted-contrast: var(--danger-muted-contrast);
	}

	.create {
	--example-color: var(--create-color);
	--example-border: var(--create-border);
	--example-contrast: var(--create-contrast);
	--example-hover: var(--create-hover);
	--example-hover-border: var(--create-hover-border);
	--example-active: var(--create-active);
	--example-active-border: var(--create-active-border);
	--example-muted: var(--create-muted);
	--example-muted-border: var(--create-muted-border);
	--example-muted-contrast: var(--create-muted-contrast);
	}

	.light {
	--example-color: var(--light-color);
	--example-border: var(--light-border);
	--example-contrast: var(--light-contrast);
	--example-hover: var(--light-hover);
	--example-hover-border: var(--light-hover-border);
	--example-active: var(--light-active);
	--example-active-border: var(--light-active-border);
	--example-muted: var(--light-muted);
	--example-muted-border: var(--light-muted-border);
	--example-muted-contrast: var(--light-muted-contrast);
	}

	.dark {
	--example-color: var(--dark-color);
	--example-border: var(--dark-border);
	--example-contrast: var(--dark-contrast);
	--example-hover: var(--dark-hover);
	--example-hover-border: var(--dark-hover-border);
	--example-active: var(--dark-active);
	--example-active-border: var(--dark-active-border);
	--example-muted: var(--dark-muted);
	--example-muted-border: var(--dark-muted-border);
	--example-muted-contrast: var(--dark-muted-contrast);
	}

	#demo {
	display: flex;
	flex-wrap: wrap;
	}

	div.example {
	display: flex;
	padding: 2px 4px;
	align-items: center;
	justify-content: center;
	height: 64px;
	width: 64px;
	max-width: 128px;
	background-color: var(--example-color);
	border: 1px solid var(--example-border);
	color: var(--example-contrast);
	margin: 2px;
	border-radius: 2px;
	}

	div.example.muted {
	background-color: var(--example-muted);
	border: 1px solid var(--example-muted-border);
	color: var(--example-muted-contrast);
	}

	div.example:hover {
	background-color: var(--example-hover);
	border: 1px solid var(--example-hover-border);
	color: var(--example-contrast);
	}

	div.example:active {
	background-color: var(--example-active);
	border: 1px solid var(--example-active-border);
	color: var(--example-contrast);
	}