SASS Color Functions for Style Guide

index.html

<div class="card">

  <div class="toggles">
    <div id="type-toggle">
      <span class="label">Opacity</span>
      <input type="checkbox" id="toggle" class="tgl tgl-light" />
      <label for="toggle" class="tgl-btn"=""></label>
    </div>

    <div id="type-toggle-2">
      <span class="label">Light</span>
      <input type="checkbox" id="toggle-2" class="tgl tgl-light" disabled />
      <label for="toggle-2" class="tgl-btn"=""></label>
    </div>
  </div>


  <ul class="colors">

    <li class="primary">

      <span class="color"></span>

      <h5>1</h5>

      <h6>#</h6>

    </li>

    <li class="dark">

      <span class="color"></span>

      <h5>2</h5>

      <h6>#</h6>

    </li>

    <li class="light">

      <span class="color"></span>

      <h5>3</h5>

      <h6>#</h6>

    </li>

    <li class="accent">

      <span class="color"></span>

      <h5>5</h5>

      <h6>#</h6>

    </li>

    <li class="success">

      <span class="color"></span>

      <h5>6</h5>

      <h6>#</h6>

    </li>

    <li class="warning">

      <span class="color"></span>

      <h5>7</h5>

      <h6>#</h6>

    </li>

    <li class="alert">

      <span class="color"></span>

      <h5>8</h5>

      <h6>#</h6>

    </li>

  </ul>

</div>

sass-color-functions-for-style-guide.markdown

SASS Color Functions for Style Guide

Using a SASS map of all primary site colors, we can use functions to create the opacity and shade spectrums.

A Pen by Lauren Hitchon on CodePen.

License.

script.js

$(document).ready(function() {

  // Programatically add the name and rgb values to the list items
  $('.colors').find('li').each(function(){
    var colorName = $(this).attr('class');
    $(this).find('h5').text(colorName.charAt(0).toUpperCase() + colorName.slice(1));
    
    var colorHex = $(this).find('.color').css('color');
    $(this).find('h6').text(colorHex);
  });

  // Watch for toggle change from opacity to shade
  var $toggle = $('#toggle');
  $toggle.change(toggleChanged);
  
  // Watch for toggle change from light to dark
  var $toggle2 = $('#toggle-2');
  $toggle2.change(toggleChanged2);
  
});

function toggleChanged(e) {
  $('ul.colors').toggleClass('shade');
  $(e.currentTarget).siblings('.label').text($(this).is(':checked') ? "Shade" : "Opacity");
  checkToggle2Status($(this).is(':checked'));
}

function toggleChanged2(e) {
  $('ul.colors').toggleClass('dark');
  $(e.currentTarget).siblings('.label').text($(this).is(':checked') ? "Dark" : "Light");
}

function checkToggle2Status(toggle1Checked){
  var $toggle2 = $('#toggle-2');
  $toggle2.attr('disabled', !toggle1Checked);
  if (!toggle1Checked) {
    $toggle2.prop('checked', false).siblings('.label').text("Light");
    $('ul.colors').removeClass('dark');
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

/*
//
// COLOR functions for creating design system
//
*/

/// Smart Scale function originally borrowed from Zurb Foundation and only modified to add saturation config, 
/////// but since have removed the determination of lightness in preference for manual shade determination
@function smartscale($color, $scale: 5%, $saturate: true) {
  @if unit($scale) != '%' {
    $scale: $scale * 1%;
  } 
  
  $saturation: if($saturate, -$scale/2, 0%);
  
  @return scale-color($color, $lightness: $scale, $saturation: $saturation);
}

$light-gray: grayscale(#b3bfc4);

$the-colors: (
  'primary':  #002A3B, // blue - vibrant
  'accent':   #B3D2CA, // blue - light
  'success':  #7FC0C1, // bright blue
  'warning':  #F7955B, // gold
  'alert':    #E76745, // red
  'light':    $light-gray, // gray
  'dark':     #1e1e1e  // gray
);

$the-opacities: (
  'full':       1,
  'secondary': .7,
  'tertiary':  .4,
  'barely':    .1,
  'hidden':     0
);

@function find-opacity($opacity){
  // return the map value for the opacity if it's not a number
  @return if(type-of($opacity) == 'number', $opacity, map-get($the-opacities, $opacity));
}

$the-shades: (
  'default':    0,
  'secondary': .3,
  'tertiary':  .6,
  'barely':    .9,
  'full':       1
);

@function find-shade($shade){
  // return the map value for the shade if it's not a number
  @if (type-of($shade) != 'number'){
    $shade: map-get($the-shades, $shade);
  }
  
  @if (unit($shade) != '%') {
    $shade: $shade * 100%;
  }
  
  @return $shade;
}

@function color-opacity($color, $opacity: 1) {
  $alpha: find-opacity($opacity);

  @if $alpha {
    $color: rgba($color, $alpha);
  }

  @return $color;
}

// MAIN FUNCTION TO USE FOR COLORING

@function main-color($color, $opacity: 1, $shade: 0%) {
  // check to see if name exists as key in the-colors then get color
  @if (map-has-key($the-colors, $color)) {
    $color: map-get($the-colors, $color);  
  }

  // find the shade
  $shade: find-shade($shade);
  
  @if ($shade != 0%) {
    $color: smartscale($color, $shade);    
  }

  // then find the opacity
  $color: color-opacity($color, $opacity);

  @return $color;
}

$blue-gray-gradient: 
  linear-gradient(160deg, 
    main-color('primary', 1, -20%) 10%, 
    main-color('dark', 1, -10%) 90%);
$blue-gray-gradient-transparent: 
  linear-gradient(160deg, 
    main-color('primary', .7, -30%) 10%, 
    main-color('dark', .7, -20%) 90%);

$accent-gray-gradient: 
   linear-gradient(160deg, 
     main-color('accent', 1, -20%) 10%, 
     main-color('dark', 1, -10%) 90%);
$accent-gray-gradient-transparent: 
  linear-gradient(160deg, 
    main-color('accent', .7, -40%) 10%, 
    main-color('dark', .7, -20%) 90%);


// Style Guide

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  display: block;
  background: $blue-gray-gradient no-repeat;
  overflow: auto;
}

h5, h6 {
  margin-bottom: 0;
}

h6 {
  margin-top: .5rem;
  color: main-color(dark, secondary);
}

.card {
  padding: 4rem;
  margin: 2rem auto;
  max-width: 64rem;
  min-width: 48rem;
  border-radius: 2px;
  background: white;
  box-shadow: 0 6px 10px 0 main-color(dark, secondary),
              0 0px 60px -40px main-color(dark, secondary),
              0 60px 60px -40px main-color(dark, secondary);
}

// Also borrowed Mauricio Allende's "Pure CSS toggle buttons" https://codepen.io/mallendeo/pen/eLIiG
.toggles {
  text-align: right;
}

[id*="type-toggle"] {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 1rem;
  
  .label {
    position: relative;
    top: -.4rem;
    margin-right: .5rem;
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: main-color(dark, secondary);
  }
  
  .tgl-light {
    + .tgl-btn {
      width: 3em;
      height: 1.5em;
      background: main-color(light);
      display: inline-block;
    }

    &:checked + .tgl-btn {
      background: main-color(dark);
    }
  }
  
  input[disabled] + .tgl-btn {
    opacity: .2;
    cursor: not-allowed;
  }
}

ul.colors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  
  li {
    flex: 0 0 calc(25% - 2rem);
    padding: 1rem;
    
    .color {
      display: block;
      height: 10rem;
      box-sizing: border-box;
      transition: all .25s;
    }
    
    &:nth-child(n+5) .color {
      height: 5rem;
    }
    
    @each $color, $value in $the-colors {
      &.#{$color} {
        .color {
          color: main-color($color);
          background: 
            linear-gradient(0deg, 
              main-color($color, full) 40%, 
              main-color($color, secondary) 40%, 
              main-color($color, secondary) 60%, 
              main-color($color, tertiary) 60%, 
              main-color($color, tertiary) 80%, 
              main-color($color, barely) 80%,
              main-color($color, barely) 100%);
        }
      }
    }
  }
  
  &.shade {
    @each $color, $value in $the-colors {      
      li.#{$color} {
        .color {
          color: main-color($color);
          background: 
            linear-gradient(0deg, 
              main-color($color, full) 40%, 
              main-color($color, full, secondary) 40%, 
              main-color($color, full, secondary) 60%, 
              main-color($color, full, tertiary) 60%, 
              main-color($color, full, tertiary) 80%, 
              main-color($color, full, barely) 80%,
              main-color($color, full, barely) 100%);
        }
      }
    }
  }
  
  &.shade.dark {
    @each $color, $value in $the-colors {      
      li.#{$color} {
        .color {
          color: main-color($color);
          background: 
            linear-gradient(0deg, 
              main-color($color, full) 40%, 
              main-color($color, full, -0.2) 40%, 
              main-color($color, full, -0.2) 60%, 
              main-color($color, full, -0.4) 60%, 
              main-color($color, full, -0.4) 80%, 
              main-color($color, full, -0.7) 80%,
              main-color($color, full, -0.7) 100%);
        }
      }
    }
  }
}

styles

<link href="https://codepen.io/chorn99/pen/KqpVoM" rel="stylesheet" />