ZF colors

by PhilQ

HTML

<div id="colors">
Basiskleuren
</div>
<br/>
<br/>

<div id="colors-scale3">
Schaal 3
</div>
<div id="colors-scale5">
Schaal 5
</div>
<div id="colors-scale7">
Schaal 7
</div>
<div id="colors-scale9">
Schaal 9
</div>
<div id="colors-scale11">
Schaal 11 (af te raden)
</div>
<br/>
<br/>

<div id="colors-neutral3">
Neutraal 5
</div>
<br/>
<br/>

<div id="colors-neutral4">
Neutraal 7
</div>
<br/>
<br/>

<div id="colors-neutral">
Neutraal A
</div>
<br/>
<br/>

<div id="colors-neutral2">
Neutraal B
</div>

SCSS

$theme-colors: () !default;

@function theme-color($name) {
  @return map-get($theme-colors, $name);
}

@function map-collect($maps...) {
  $collection: ();
  
  @each $map in $maps {
    $t: type-of($map);
    @if $t == 'list' {
      @each $v in $map {
        $collection: append($collection, $v, 'comma');
      }
    } @else if $t == 'map' {
      @each $k, $v in $map {
        $collection: append($collection, $v, 'comma');
      }
    } @else {
      $collection: append($collection, $map, 'comma');
    }
  }
  @return $collection;
}

/// Returns the luminance of `$color` as a float (between 0 and 1)
/// 1 is pure white, 0 is pure black
/// @param {Color} $color - Color
/// @return {Number}
/// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference
@function luminance($color) {
  $colors: (
    'red': red($color),
    'green': green($color),
    'blue': blue($color)
  );

  @each $name, $value in $colors {
    $adjusted: 0;
    $value: $value / 255;

    @if $value < 0.03928 {
      $value: $value / 12.92;
    } @else {
      $value: ($value + .055) / 1.055;
      $value: pow($value, 2.4);
    }

    $colors: map-merge($colors, ($name: $value));
  }

  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
}

@function make-bg($colors: $theme-colors) {
	$color-cnt: length($colors);
	//$per-color: floor(100% / $color-cnt);
	$per-color: 100% / $color-cnt;
	$p: 0%;
	$gradient: ();
	@if type-of($colors) == 'map' {
  	@each $k, $v in $colors {
  	  $gradient: append($gradient, unquote('#{$v} #{$p}'), 'comma');
  	  $p: $p + $per-color;
  	  $gradient: append($gradient, unquote('#{$v} #{$p}'), 'comma');
  	}
	} @else {
  	@each $v in $colors {
  	  $gradient: append($gradient, unquote('#{$v} #{$p}'), 'comma');
  	  $p: $p + $per-color;
  	  $gradient: append($gradient, unquote('#{$v} #{$p}'), 'comma');
  	}
	}
	//@if $p < 100% {
	//  $gradient: append($gradient,...