<div class="test test-1"></div>
<div class="test test-2"></div>
<div class="test test-3"></div>
<div class="test test-4"></div>
<div class="test test-5"></div>
<div class="test test-6"></div>

<p class="p">Demo by Kitty Giraudel. <a href="">See article</a>.</p>

/**
 * Function defining the difference between 2 colors
 *
 * @param {Color} $a - first color
 * @param {Color} $b - second color
 *
 * @return {Map}  The color operations to do in order to find $b from $a where keys are the color functions to apply and values are the values to pass to these functions
 */
@function color-diff($a, $b) {
  $sat: saturation($a) - saturation($b);
  $lig:  lightness($a) -  lightness($b);
  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
  $fn-lig: if($lig > 0, 'darken', 'lighten');
  
  @return (
    adjust-hue: -(hue($a) - hue($b)),
    #{$fn-sat}: abs($sat),
    #{$fn-lig}: abs($lig)
  );
}
 
/**
 * Compute the diff for each color from the initial palette
 *
 * @param {Map} $palette - palette
 *
 * @requires {function} color-diff
 * 
 * @return {List} list of diffs
 */
@function palette-diff($palette) {
  $base: map-get($palette, base);
  $colors: map-get($palette, colors);
  
  $diffs: ();
  
  @each $color in $colors {
    $diffs: append($diffs, color-diff($base, $color));
  }
  
  @return $diffs;
}

/**
 * Initial palette used to define the diff between the base color and each color from the palette. There can be as many colors as one wants.
 * 
 * @Link https://ton.twitter.com/i/ton/data/dm/487926326314418176/487926326322823168/8M2k8xOp.png Initial color palette
 *
 * @type Map
 */ 
$base-palette: (
  base: #FF6351, 
  colors: #CFDFE8 #BFB9C3 #CF9192 #FF6351 #BF4A3C #7F3128 #732C24
) !default;

/**
 * Palette diffs
 * Same length as colors key from map-palette
 *
 * @type List
 */
$palette-diffs: palette-diff($base-palette);

/**
 * Apply differences returned from `color-diff` function to a color in order to retrieve the second color
 *
 * @param {Color} $color - color to transform
 * @param {Map} $diff - diff map
 * 
 * @return {Color} transformed color
 */
@function apply-diff($color, $diff) {
  // We call the $key (function), 
  // passing the $color and the $value as parameters
  // e.g. `call(adjust-hue, #BADA55, 42)`
  @each $key, $value in $diff {
    $color: call($key, $color, $value);
  }
  
  @return $color;
}

/**
 * Create a palette from a base color
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} palette-diff
 * @requires {function} apply-diff
 * @requires {variable} $base-palette
 *
 * @return {List} list of colors
 */
@function create-palette($base-color) {
  $colors: ();
  
  @each $diff in $palette-diffs {
    $colors: append($colors, apply-diff($base-color, $diff));
  }
  
  @return $colors;
}

/**
 * Create a list of colors from the base color
 * then turn in into a map with explicit keys
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} create-palette
 *
 * @return {Map}
 */
@function palette($base-color) {
  $colors: create-palette($base-color);
  $keys: 'lightest' 'lighter' 'light' 'base' 'dark' 'darker' 'darkest';
  $palette: ();

  @for $i from 1 through min(length($colors), length($keys)) {
    $palette: map-merge($palette, (nth($keys, $i): nth($colors, $i)));
  }

  @return $palette;
}

/**
 * Create and apply a palette
 * 
 * @param {Color} $base-color - base color
 * 
 * @requires {function} create-palette
 */
@mixin draw-palette($base-color) {
  $palette: create-palette($base-color);
  $length: length($palette);
  $color-stops: append((), nth($palette, 1), comma);
  $stop-size: 100 / $length;

  @for $i from 1 through $length {
    $color: nth($palette, $i);
      
    @if $i > 1 {
      $color-stops: append($color-stops, $color $stop-size * ($i - 1) * 1%);
    }
    
    $color-stops: append($color-stops, $color $stop-size * $i * 1%); 
  }

  background: nth($palette, ceil($length / 2));
  background: linear-gradient(to right, $color-stops);
}

// Palettes
// Change a value to see the palette adjusted
.test-1 { @include draw-palette(red) }
.test-2 { @include draw-palette(tomato) }
.test-3 { @include draw-palette(deepskyblue) }
.test-4 { @include draw-palette(gold) }
.test-5 { @include draw-palette(magenta) }
.test-6 { @include draw-palette(silver) }


// Demo styles
.test {
  margin: 1em 0;
  height: 6em;
}

.p {
  text-align: center;
}