Customizer for Flint, with color options: Being postponed

customizer.js

/**
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */

( function( $ ) {
  // Site title and description.
  wp.customize( 'blogname', function( value ) {
    value.bind( function( to ) {
      $( '.site-title a' ).text( to );
    } );
  } );
  wp.customize( 'blogdescription', function( value ) {
    value.bind( function( to ) {
      $( '.site-description' ).text( to );
    } );
  } );
  // Header text color.
  wp.customize( 'header_textcolor', function( value ) {
    value.bind( function( to ) {
      $( '.site-title a, .site-description' ).css( 'color', to );
    } );
  } );
  // Header text color.
  wp.customize( 'flint_options[accent]', function( value ) {
    value.bind( function( to ) {
      $( '.navbar-inverse, #masthead, #colophon' ).css( 'background-color', to );
    } );
  } );
} )( jQuery );

customizer.php

<?php
/**
 * Flint Theme Customizer
 *
 * @package Flint
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function flint_customize_register( $wp_customize ) {

  
	$wp_customize->add_section('flint_color_scheme', array(
        'title'    => __('Brand Colors', 'themename'),
        'priority' => 120,
    ));
  
  $wp_customize->add_setting('flint_options[primary]', array(
    'default'           => '#428bca',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'primary', array(
    'label'    => __('Primary', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[primary]',
		'priority' => '10',
  )));
	
	$wp_customize->add_setting('flint_options[success]', array(
    'default'           => '#5cb85c',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'success', array(
    'label'    => __('Success', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[success]',
		'priority' => '20',
  )));
	
	$wp_customize->add_setting('flint_options[warning]', array(
    'default'           => '#f0ad4e',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'warning', array(
    'label'    => __('Warning', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[warning]',
		'priority' => '30',
  )));
	
	$wp_customize->add_setting('flint_options[danger]', array(
    'default'           => '#d9534f',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'danger', array(
    'label'    => __('Danger', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[danger]',
		'priority' => '40',
  )));
	
	$wp_customize->add_setting('flint_options[info]', array(
    'default'           => '#5bc0de',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'info', array(
    'label'    => __('Info', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[info]',
		'priority' => '50',
  )));
	
	$wp_customize->add_setting('flint_options[accent]', array(
    'default'           => '#222222',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
		'transport' => 'postMessage',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent', array(
    'label'    => __('Accent Canvas', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[accent]',
		'priority' => '60',
  )));
	
	$wp_customize->add_setting('flint_options[accent-text]', array(
    'default'           => '#ffffff',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent-text', array(
    'label'    => __('Accent Text', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[accent-text]',
		'priority' => '70',
  )));
	
	$wp_customize->add_setting('flint_options[accent-link]', array(
    'default'           => '#999999',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'type'              => 'option',
  ));
  
  $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'accent-link', array(
    'label'    => __('Accent Link', 'flint'),
    'section'  => 'flint_color_scheme',
    'settings' => 'flint_options[accent-link]',
		'priority' => '80',
  )));
	
	$wp_customize->get_setting( 'blogname'         )->transport = 'postMessage';
  $wp_customize->get_setting( 'blogdescription'  )->transport = 'postMessage';
  $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
}
add_action( 'customize_register', 'flint_customize_register' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function flint_customize_preview_js() {
  wp_enqueue_script( 'flint_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '1.1.0', true );
}
add_action( 'customize_preview_init', 'flint_customize_preview_js' );

functions.php

<?php /* Truncated */
/**
 * Converts Hex to HSL
 */
function HexHSL( $HexColor ) {
  $HexColor    = str_replace( '#', '', $HexColor );
  
  if( strlen( $HexColor ) < 3 ) str_pad( $HexColor, 3 - strlen( $HexColor ), '0' );
  
  $Add         = strlen( $HexColor ) == 6 ? 2 : 1;
  $AA          = 0;
  $AddOn       = $Add == 1 ? ( $AA = 16 - 1 ) + 1 : 1;
  
  $Red         = round( ( hexdec( substr( $HexColor, 0, $Add ) ) * $AddOn + $AA ) / 255, 6 );
  $Green       = round( ( hexdec( substr( $HexColor, $Add, $Add ) ) * $AddOn + $AA ) / 255, 6 );
  $Blue        = round( ( hexdec( substr( $HexColor, ( $Add + $Add ) , $Add ) ) * $AddOn + $AA ) / 255, 6 );
  
  
  $HSLColor    = array( 'Hue' => 0, 'Saturation' => 0, 'Luminance' => 0 );
  
  $Minimum     = min( $Red, $Green, $Blue );
  $Maximum     = max( $Red, $Green, $Blue );
  
  $Chroma      = $Maximum - $Minimum;
  
  $HSLColor['Luminance'] = ( $Minimum + $Maximum ) / 2;
  
  if( $Chroma == 0 ) {
    $HSLColor['Luminance'] = round( $HSLColor['Luminance'], 3 );
    return $HSLColor;
  }
  
  $Range = $Chroma * 6;
  
  $HSLColor['Saturation'] = $HSLColor['Luminance'] <= 0.5 ? $Chroma / ( $HSLColor['Luminance'] * 2 ) : $Chroma / ( 2 - ( $HSLColor['Luminance'] * 2 ) );
  
  if( $Red <= 0.004 || $Green <= 0.004 || $Blue <= 0.004 )
    $HSLColor['Saturation'] = 1;
  
  if( $Maximum == $Red ) { $HSLColor['Hue'] = round( ( $Blue > $Green ? 1 - ( abs( $Green - $Blue ) / $Range ) : ( $Green - $Blue ) / $Range ), 3 ); }
  else if( $Maximum == $Green ) { $HSLColor['Hue'] = round( ( $Red > $Blue ? abs( 1 - ( 4 / 3 ) + ( abs ( $Blue - $Red ) / $Range ) ) : ( 1 / 3 ) + ( $Blue - $Red ) / $Range ), 3 ); }
  else { $HSLColor['Hue'] = round( ( $Green < $Red ? 1 - 2 / 3 + abs( $Red - $Green ) / $Range : 2 / 3 + ( $Red - $Green ) / $Range ), 3 ); }
  
  $HSLColor['Saturation'] = round( $HSLColor['Saturation'], 3 );
  $HSLColor['Luminance']  = round( $HSLColor['Luminance'], 3 );
  
  return $HSLColor;
}

/**
 * Converts HSL to Hex
 */
function HSLHex( $Hue = 0, $Saturation = 0, $Luminance = 0 ) {
  
  $HSLColor    = array( 'Hue' => $Hue, 'Saturation' => $Saturation, 'Luminance' => $Luminance );
  $RGBColor    = array( 'Red' => 0, 'Green' => 0, 'Blue' => 0 );
  
  
  foreach( $HSLColor as $Name => $Value ) {
    if( is_string( $Value ) && strpos( $Value, '%' ) !== false )
      $Value = round( round( (int)str_replace( '%', '', $Value ) / 100, 2 ) * 255, 0 );
    
    else if( is_float( $Value ) )
      $Value = round( $Value * 255, 0 );
    
    $Value    = (int)$Value * 1;
    $Value    = $Value > 255 ? 255 : ( $Value < 0 ? 0 : $Value );
    $ValuePct = round( $Value / 255, 6 );
    
    define( "{$Name}", $ValuePct );
  }
  
  $RGBColor['Red']   = Luminance;
  $RGBColor['Green'] = Luminance;
  $RGBColor['Blue']  = Luminance;
  
  $Radial  = Luminance <= 0.5 ? Luminance * ( 1.0 + Saturation ) : Luminance + Saturation - ( Luminance * Saturation );
  
  if( $Radial > 0 ) {
    $Ma   = Luminance + ( Luminance - $Radial );
    $Sv   = round( ( $Radial - $Ma ) / $Radial, 6 );
    $Th   = Hue * 6;
    $Wg   = floor( $Th );
    $Fr   = $Th - $Wg;
    $Vs   = $Radial * $Sv * $Fr;
    $Mb   = $Ma + $Vs;
    $Mc   = $Radial - $Vs;
    
    if ($Wg == 1) {
      $RGBColor['Red']   = $Mc;
      $RGBColor['Green'] = $Radial;
      $RGBColor['Blue']  = $Ma;
    }
    else if( $Wg == 2 ) {
      $RGBColor['Red']   = $Ma;
      $RGBColor['Green'] = $Radial;
      $RGBColor['Blue']  = $Mb;
    }
    else if( $Wg == 3 ) {
      $RGBColor['Red']   = $Ma;
      $RGBColor['Green'] = $Mc;
      $RGBColor['Blue']  = $Radial;
    }
    else if( $Wg == 4 ) {
      $RGBColor['Red']   = $Mb;
      $RGBColor['Green'] = $Ma;
      $RGBColor['Blue']  = $Radial;
    }
    else if( $Wg == 5 ) {
      $RGBColor['Red']   = $Radial;
      $RGBColor['Green'] = $Ma;
      $RGBColor['Blue']  = $Mc;
    }
    else {
      $RGBColor['Red']   = $Radial;
      $RGBColor['Green'] = $Mb;
      $RGBColor['Blue']  = $Ma;
    }
  }
  
  $RGBColor['Red']   = ($C = round( $RGBColor['Red'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C );
  $RGBColor['Green'] = ($C = round( $RGBColor['Green'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C );
  $RGBColor['Blue']  = ($C = round( $RGBColor['Blue'] * 255, 0 )) < 15 ? '0'.dechex( $C ) : dechex( $C );
  
  return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue'];
}

/**
 * Darkens Hex color by defined percentage
 */
function darkenHex( $HexColor, $percent ) {
  HexHSL($HexColor);
  $HSLColor['Luminance'] = $HSLColor['Luminance'] - ($percent/100);
  $HSLColor['Luminance'] = $HSLColor['Luminance'] < 0 ? 0 : $HSLColor['Luminance'];
  HSLHex($HSLColor['Hue'],$HSLColor['Saturation'],$HSLColor['Luminance']);
  return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue'];
}

/**
 * Lightens Hex color by defined percentage
 */
function lightenHex( $HexColor, $percent ) {
  HexHSL($HexColor);
  $HSLColor['Luminance'] = $HSLColor['Luminance'] + ($percent/100);
  $HSLColor['Luminance'] = $HSLColor['Luminance'] < 0 ? 0 : $HSLColor['Luminance'];
  HSLHex($HSLColor['Hue'],$HSLColor['Saturation'],$HSLColor['Luminance']);
  return '#' . $RGBColor['Red'].$RGBColor['Green'].$RGBColor['Blue'];
}
?>