lightspeeddevelopment / lsx-customizer

classes/class-lsx-customizer-colour.php

Indentation +447 added lines, -447 removed lines

@@ -1,375 +1,375 @@ 
 <?php
 if ( ! class_exists( 'LSX_Customizer_Colour' ) ) {
 
-	/**
-	 * LSX Customizer Colour Class
-	 *
-	 * @package   LSX Customizer
-	 * @author    LightSpeed
-	 * @license   GPL3
-	 * @link
-	 * @copyright 2016 LightSpeed
-	 */
-	class LSX_Customizer_Colour extends LSX_Customizer {
-
-		/**
-		 * Button customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $button;
-
-		/**
-		 * Button CTA customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $button_cta;
-
-		/**
-		 * Button secondary customizer instance.
-		 *
-		 * @var string
-		 * @since 1.1.0
-		 */
-		public $button_secondary;
-
-		/**
-		 * Button tertiary customizer instance.
-		 *
-		 * @var string
-		 * @since 1.1.0
-		 */
-		public $button_tertiary;
-
-		/**
-		 * Top Menu customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $top_menu;
-
-		/**
-		 * Header customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $header;
-
-		/**
-		 * Main menu customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $main_menu;
-
-		/**
-		 * Banner customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $banner;
-
-		/**
-		 * Body customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $body;
-
-		/**
-		 * Footer CTA customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $footer_cta;
-
-		/**
-		 * Footer Widgets customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $footer_widgets;
-
-		/**
-		 * Footer customizer instance.
-		 *
-		 * @var string
-		 * @since 1.0.0
-		 */
-		public $footer;
-
-		/**
-		 * Constructor.
-		 *
-		 * @since 1.0.0
-		 */
-		public function __construct() {
-			add_action( 'after_setup_theme',                       array( $this, 'after_setup_theme' ), 20 );
-			add_action( 'customize_register',                      array( $this, 'customize_register' ), 20 );
-			add_action( 'customize_controls_print_footer_scripts', array( $this, 'colour_scheme_css_template' ) );
-		}
-
-		/**
-		 * Customizer Controls and Settings.
-		 *
-		 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
-		 * @since 1.0.0
-		 */
-		public function after_setup_theme() {
-			require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-options.php' );
-			require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-deprecated.php' );
-			require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-templates.php' );
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button.php' );
-			$this->button = new LSX_Customizer_Colour_Button();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-cta.php' );
-			$this->button_cta = new LSX_Customizer_Colour_Button_CTA();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-secondary.php' );
-			$this->button_secondary = new LSX_Customizer_Colour_Button_Secondary();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-tertiary.php' );
-			$this->button_tertiary = new LSX_Customizer_Colour_Button_Tertiary();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-top-menu.php' );
-			$this->top_menu = new LSX_Customizer_Colour_Top_Menu();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-header.php' );
-			$this->header = new LSX_Customizer_Colour_Header();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-main-menu.php' );
-			$this->main_menu = new LSX_Customizer_Colour_Main_Menu();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-banner.php' );
-			$this->banner = new LSX_Customizer_Colour_Banner();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-body.php' );
-			$this->body = new LSX_Customizer_Colour_Body();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-cta.php' );
-			$this->footer_cta = new LSX_Customizer_Colour_Footer_CTA();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-widgets.php' );
-			$this->footer_widgets = new LSX_Customizer_Colour_Footer_Widgets();
-
-			require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer.php' );
-			$this->footer = new LSX_Customizer_Colour_Footer();
-		}
-
-		/**
-		 * Customizer Controls and Settings.
-		 *
-		 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
-		 * @since 1.0.0
-		 */
-		public function customize_register( $wp_customize ) {
-			global $customizer_colour_names;
-			global $customizer_colour_choices;
-
-			/**
-			 * Colors
-			 */
-			$wp_customize->add_panel( 'colors', array(
-				'title'             => esc_html__( 'Site Design', 'lsx-customizer' ),
-				'priority'          => 60,
-			) );
-
-			$wp_customize->add_section( 'colors-palette', array(
-				'title'             => esc_html__( 'Block Editor Color Palette', 'lsx-customizer' ),
-				'description' => esc_html__( 'Add colors to use within the Gutenberg editor color palette.', 'lsx-customizer' ),
-				'priority'          => 2,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-button', array(
-				'title'             => esc_html__( 'Button', 'lsx-customizer' ),
-				'priority'          => 3,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-button-cta', array(
-				'title'             => esc_html__( 'Button CTA', 'lsx-customizer' ),
-				'priority'          => 4,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-button-secondary', array(
-				'title'             => esc_html__( 'Button Secondary', 'lsx-customizer' ),
-				'priority'          => 5,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-button-tertiary', array(
-				'title'             => esc_html__( 'Button Tertiary', 'lsx-customizer' ),
-				'priority'          => 6,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-top-menu', array(
-				'title'             => esc_html__( 'Top Menu', 'lsx-customizer' ),
-				'priority'          => 7,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-header', array(
-				'title'             => esc_html__( 'Header', 'lsx-customizer' ),
-				'priority'          => 8,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-main-menu', array(
-				'title'             => esc_html__( 'Main Menu', 'lsx-customizer' ),
-				'priority'          => 9,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-banner', array(
-				'title'             => esc_html__( 'Banner', 'lsx-customizer' ),
-				'priority'          => 10,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-body', array(
-				'title'             => esc_html__( 'Body', 'lsx-customizer' ),
-				'priority'          => 11,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-footer-cta', array(
-				'title'             => esc_html__( 'Footer CTA', 'lsx-customizer' ),
-				'priority'          => 12,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-footer-widgets', array(
-				'title'             => esc_html__( 'Footer Widgets', 'lsx-customizer' ),
-				'priority'          => 13,
-				'panel'             => 'colors',
-			) );
-
-			$wp_customize->add_section( 'colors-footer', array(
-				'title'             => esc_html__( 'Footer', 'lsx-customizer' ),
-				'priority'          => 14,
-				'panel'             => 'colors',
-			) );
-
-			/**
-			 * Color Palette
-			 */
-			$colors = $this->get_color_scheme();
-
-			$customizer_colour_defaults = array(
-				__( 'Primary Color', 'lsx-customizer' )   => get_theme_mod( 'button_background_color', $colors['button_background_color'] ),
-				__( 'Strong Primary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_background_hover_color', $colors['button_background_hover_color'] ),
-				__( 'Call To Action Color', 'lsx-customizer' ) => get_theme_mod( 'button_cta_background_color', $colors['button_cta_background_color'] ),
-				__( 'Strong CTA Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_cta_shadow', $colors['button_cta_shadow'] ),
-				__( 'Secondary Color', 'lsx-customizer' ) => get_theme_mod( 'button_secondary_background_color', $colors['button_secondary_background_color'] ),
-				__( 'Strong Secondary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_secondary_shadow', $colors['button_secondary_shadow'] ),
-				__( 'Tertiary Color', 'lsx-customizer' )  => get_theme_mod( 'button_tertiary_background_color', $colors['button_tertiary_background_color'] ),
-				__( 'Strong Tertiary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_tertiary_shadow', $colors['button_tertiary_shadow'] ),
-			);
-			foreach ( $customizer_colour_defaults as $key => $value ) {
-
-				$color_name = strtolower( str_replace( ' ', '_', $key ) );
-				$color_name = $color_name;
-
-				$wp_customize->add_setting( $color_name, array(
-					'default'           => $value,
-					'type'              => 'theme_mod',
-					'transport'         => 'postMessage',
-					'sanitize_callback' => 'sanitize_hex_color',
-				) );
-				$wp_customize->add_control(
-					new WP_Customize_Color_Control(
-						$wp_customize,
-						$color_name,
-						array(
-							'label'    => $key,
-							'section'  => 'colors-palette',
-							'settings' => $color_name,
-						)
-					)
-				);
-			}
-
-			/**
-			 * Colors
-			 */
-			foreach ( $customizer_colour_names as $key => $value ) {
-				$sanitize_callback = 'sanitize_hex_color';
-
-				if ( 'background_color' === $key ) {
-					$sanitize_callback = 'sanitize_hex_color_no_hash';
-				}
-
-				$section = 'colors-core';
-
-				if ( preg_match( '/^button_cta_.*/', $key ) ) {
-					$section = 'colors-button-cta';
-				} elseif ( preg_match( '/^button_secondary_.*/', $key ) ) {
-					$section = 'colors-button-secondary';
-				} elseif ( preg_match( '/^button_tertiary_.*/', $key ) ) {
-					$section = 'colors-button-tertiary';
-				} elseif ( preg_match( '/^button_.*/', $key ) ) {
-					$section = 'colors-button';
-				} elseif ( preg_match( '/^top_menu_.*/', $key ) ) {
-					$section = 'colors-top-menu';
-				} elseif ( preg_match( '/^header_.*/', $key ) ) {
-					$section = 'colors-header';
-				} elseif ( preg_match( '/^main_menu_.*/', $key ) ) {
-					$section = 'colors-main-menu';
-				} elseif ( preg_match( '/^banner_.*/', $key ) ) {
-					$section = 'colors-banner';
-				} elseif ( preg_match( '/^body_.*/', $key ) || 'background_color' === $key ) {
-					$section = 'colors-body';
-				} elseif ( preg_match( '/^footer_cta_.*/', $key ) ) {
-					$section = 'colors-footer-cta';
-				} elseif ( preg_match( '/^footer_widgets_.*/', $key ) ) {
-					$section = 'colors-footer-widgets';
-				} elseif ( preg_match( '/^footer_.*/', $key ) ) {
-					$section = 'colors-footer';
-				}
-
-				$wp_customize->add_setting( $key, array(
-					'default'           => $customizer_colour_choices['default']['colors'][ $key ],
-					'type'              => 'theme_mod',
-					'transport'         => 'postMessage',
-					'sanitize_callback' => $sanitize_callback,
-				) );
-
-				$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array(
-					'label'             => $value,
-					'section'           => $section,
-					'settings'          => $key,
-				) ) );
-			}
-		}
-
-		/**
-		 * Outputs an Underscore template for generating CSS for the color scheme.
-		 *
-		 * @since 1.0.0
-		 */
-		public function colour_scheme_css_template() {
-			global $customizer_colour_names;
-
-			$colors = array();
-
-			foreach ( $customizer_colour_names as $key => $value ) {
-				$colors[ $key ] = 'unquote("{{ data.' . $key . ' }}")';
-			}
-			?>
+     /**
+      * LSX Customizer Colour Class
+      *
+      * @package   LSX Customizer
+      * @author    LightSpeed
+      * @license   GPL3
+      * @link
+      * @copyright 2016 LightSpeed
+      */
+     class LSX_Customizer_Colour extends LSX_Customizer {
+
+          /**
+           * Button customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $button;
+
+          /**
+           * Button CTA customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $button_cta;
+
+          /**
+           * Button secondary customizer instance.
+           *
+           * @var string
+           * @since 1.1.0
+           */
+          public $button_secondary;
+
+          /**
+           * Button tertiary customizer instance.
+           *
+           * @var string
+           * @since 1.1.0
+           */
+          public $button_tertiary;
+
+          /**
+           * Top Menu customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $top_menu;
+
+          /**
+           * Header customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $header;
+
+          /**
+           * Main menu customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $main_menu;
+
+          /**
+           * Banner customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $banner;
+
+          /**
+           * Body customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $body;
+
+          /**
+           * Footer CTA customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $footer_cta;
+
+          /**
+           * Footer Widgets customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $footer_widgets;
+
+          /**
+           * Footer customizer instance.
+           *
+           * @var string
+           * @since 1.0.0
+           */
+          public $footer;
+
+          /**
+           * Constructor.
+           *
+           * @since 1.0.0
+           */
+          public function __construct() {
+               add_action( 'after_setup_theme',                       array( $this, 'after_setup_theme' ), 20 );
+               add_action( 'customize_register',                      array( $this, 'customize_register' ), 20 );
+               add_action( 'customize_controls_print_footer_scripts', array( $this, 'colour_scheme_css_template' ) );
+          }
+
+          /**
+           * Customizer Controls and Settings.
+           *
+           * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+           * @since 1.0.0
+           */
+          public function after_setup_theme() {
+               require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-options.php' );
+               require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-colour-deprecated.php' );
+               require_once( LSX_CUSTOMIZER_PATH . 'includes/lsx-customizer-templates.php' );
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button.php' );
+               $this->button = new LSX_Customizer_Colour_Button();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-cta.php' );
+               $this->button_cta = new LSX_Customizer_Colour_Button_CTA();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-secondary.php' );
+               $this->button_secondary = new LSX_Customizer_Colour_Button_Secondary();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-button-tertiary.php' );
+               $this->button_tertiary = new LSX_Customizer_Colour_Button_Tertiary();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-top-menu.php' );
+               $this->top_menu = new LSX_Customizer_Colour_Top_Menu();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-header.php' );
+               $this->header = new LSX_Customizer_Colour_Header();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-main-menu.php' );
+               $this->main_menu = new LSX_Customizer_Colour_Main_Menu();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-banner.php' );
+               $this->banner = new LSX_Customizer_Colour_Banner();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-body.php' );
+               $this->body = new LSX_Customizer_Colour_Body();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-cta.php' );
+               $this->footer_cta = new LSX_Customizer_Colour_Footer_CTA();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer-widgets.php' );
+               $this->footer_widgets = new LSX_Customizer_Colour_Footer_Widgets();
+
+               require_once( LSX_CUSTOMIZER_PATH . 'classes/class-lsx-customizer-colour-footer.php' );
+               $this->footer = new LSX_Customizer_Colour_Footer();
+          }
+
+          /**
+           * Customizer Controls and Settings.
+           *
+           * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+           * @since 1.0.0
+           */
+          public function customize_register( $wp_customize ) {
+               global $customizer_colour_names;
+               global $customizer_colour_choices;
+
+               /**
+                * Colors
+                */
+               $wp_customize->add_panel( 'colors', array(
+                    'title'             => esc_html__( 'Site Design', 'lsx-customizer' ),
+                    'priority'          => 60,
+               ) );
+
+               $wp_customize->add_section( 'colors-palette', array(
+                    'title'             => esc_html__( 'Block Editor Color Palette', 'lsx-customizer' ),
+                    'description' => esc_html__( 'Add colors to use within the Gutenberg editor color palette.', 'lsx-customizer' ),
+                    'priority'          => 2,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-button', array(
+                    'title'             => esc_html__( 'Button', 'lsx-customizer' ),
+                    'priority'          => 3,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-button-cta', array(
+                    'title'             => esc_html__( 'Button CTA', 'lsx-customizer' ),
+                    'priority'          => 4,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-button-secondary', array(
+                    'title'             => esc_html__( 'Button Secondary', 'lsx-customizer' ),
+                    'priority'          => 5,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-button-tertiary', array(
+                    'title'             => esc_html__( 'Button Tertiary', 'lsx-customizer' ),
+                    'priority'          => 6,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-top-menu', array(
+                    'title'             => esc_html__( 'Top Menu', 'lsx-customizer' ),
+                    'priority'          => 7,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-header', array(
+                    'title'             => esc_html__( 'Header', 'lsx-customizer' ),
+                    'priority'          => 8,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-main-menu', array(
+                    'title'             => esc_html__( 'Main Menu', 'lsx-customizer' ),
+                    'priority'          => 9,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-banner', array(
+                    'title'             => esc_html__( 'Banner', 'lsx-customizer' ),
+                    'priority'          => 10,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-body', array(
+                    'title'             => esc_html__( 'Body', 'lsx-customizer' ),
+                    'priority'          => 11,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-footer-cta', array(
+                    'title'             => esc_html__( 'Footer CTA', 'lsx-customizer' ),
+                    'priority'          => 12,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-footer-widgets', array(
+                    'title'             => esc_html__( 'Footer Widgets', 'lsx-customizer' ),
+                    'priority'          => 13,
+                    'panel'             => 'colors',
+               ) );
+
+               $wp_customize->add_section( 'colors-footer', array(
+                    'title'             => esc_html__( 'Footer', 'lsx-customizer' ),
+                    'priority'          => 14,
+                    'panel'             => 'colors',
+               ) );
+
+               /**
+                * Color Palette
+                */
+               $colors = $this->get_color_scheme();
+
+               $customizer_colour_defaults = array(
+                    __( 'Primary Color', 'lsx-customizer' )   => get_theme_mod( 'button_background_color', $colors['button_background_color'] ),
+                    __( 'Strong Primary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_background_hover_color', $colors['button_background_hover_color'] ),
+                    __( 'Call To Action Color', 'lsx-customizer' ) => get_theme_mod( 'button_cta_background_color', $colors['button_cta_background_color'] ),
+                    __( 'Strong CTA Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_cta_shadow', $colors['button_cta_shadow'] ),
+                    __( 'Secondary Color', 'lsx-customizer' ) => get_theme_mod( 'button_secondary_background_color', $colors['button_secondary_background_color'] ),
+                    __( 'Strong Secondary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_secondary_shadow', $colors['button_secondary_shadow'] ),
+                    __( 'Tertiary Color', 'lsx-customizer' )  => get_theme_mod( 'button_tertiary_background_color', $colors['button_tertiary_background_color'] ),
+                    __( 'Strong Tertiary Color', 'lsx-button_shadow' ) => get_theme_mod( 'button_tertiary_shadow', $colors['button_tertiary_shadow'] ),
+               );
+               foreach ( $customizer_colour_defaults as $key => $value ) {
+
+                    $color_name = strtolower( str_replace( ' ', '_', $key ) );
+                    $color_name = $color_name;
+
+                    $wp_customize->add_setting( $color_name, array(
+                         'default'           => $value,
+                         'type'              => 'theme_mod',
+                         'transport'         => 'postMessage',
+                         'sanitize_callback' => 'sanitize_hex_color',
+                    ) );
+                    $wp_customize->add_control(
+                         new WP_Customize_Color_Control(
+                              $wp_customize,
+                              $color_name,
+                              array(
+                                   'label'    => $key,
+                                   'section'  => 'colors-palette',
+                                   'settings' => $color_name,
+                              )
+                         )
+                    );
+               }
+
+               /**
+                * Colors
+                */
+               foreach ( $customizer_colour_names as $key => $value ) {
+                    $sanitize_callback = 'sanitize_hex_color';
+
+                    if ( 'background_color' === $key ) {
+                         $sanitize_callback = 'sanitize_hex_color_no_hash';
+                    }
+
+                    $section = 'colors-core';
+
+                    if ( preg_match( '/^button_cta_.*/', $key ) ) {
+                         $section = 'colors-button-cta';
+                    } elseif ( preg_match( '/^button_secondary_.*/', $key ) ) {
+                         $section = 'colors-button-secondary';
+                    } elseif ( preg_match( '/^button_tertiary_.*/', $key ) ) {
+                         $section = 'colors-button-tertiary';
+                    } elseif ( preg_match( '/^button_.*/', $key ) ) {
+                         $section = 'colors-button';
+                    } elseif ( preg_match( '/^top_menu_.*/', $key ) ) {
+                         $section = 'colors-top-menu';
+                    } elseif ( preg_match( '/^header_.*/', $key ) ) {
+                         $section = 'colors-header';
+                    } elseif ( preg_match( '/^main_menu_.*/', $key ) ) {
+                         $section = 'colors-main-menu';
+                    } elseif ( preg_match( '/^banner_.*/', $key ) ) {
+                         $section = 'colors-banner';
+                    } elseif ( preg_match( '/^body_.*/', $key ) || 'background_color' === $key ) {
+                         $section = 'colors-body';
+                    } elseif ( preg_match( '/^footer_cta_.*/', $key ) ) {
+                         $section = 'colors-footer-cta';
+                    } elseif ( preg_match( '/^footer_widgets_.*/', $key ) ) {
+                         $section = 'colors-footer-widgets';
+                    } elseif ( preg_match( '/^footer_.*/', $key ) ) {
+                         $section = 'colors-footer';
+                    }
+
+                    $wp_customize->add_setting( $key, array(
+                         'default'           => $customizer_colour_choices['default']['colors'][ $key ],
+                         'type'              => 'theme_mod',
+                         'transport'         => 'postMessage',
+                         'sanitize_callback' => $sanitize_callback,
+                    ) );
+
+                    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array(
+                         'label'             => $value,
+                         'section'           => $section,
+                         'settings'          => $key,
+                    ) ) );
+               }
+          }
+
+          /**
+           * Outputs an Underscore template for generating CSS for the color scheme.
+           *
+           * @since 1.0.0
+           */
+          public function colour_scheme_css_template() {
+               global $customizer_colour_names;
+
+               $colors = array();
+
+               foreach ( $customizer_colour_names as $key => $value ) {
+                    $colors[ $key ] = 'unquote("{{ data.' . $key . ' }}")';
+               }
+               ?>
 			<script type="text/html" id="tmpl-lsx-color-scheme">
 				<?php echo esc_attr( $this->top_menu->get_css( $colors ) ); ?>
 				<?php echo esc_attr( $this->header->get_css( $colors ) ); ?>
@@ -388,89 +388,89 @@ 
 				<?php echo esc_attr( $this->button_tertiary->get_css( $colors ) ); ?>
 			</script>
 			<?php
-		}
-
-		/**
-		 * Transform SCSS to CSS.
-		 *
-		 * @since 1.0.0
-		 */
-		public function scss_to_css( $scss ) {
-			$css                 = '';
-			$scss_php_file       = LSX_CUSTOMIZER_PATH . 'vendor/leafo/scssphp/scss.inc.php';
-			$lsx_theme_sass_file = get_template_directory() . '/assets/css/scss/lsx.scss';
-
-			if ( ! empty( $scss ) && file_exists( $scss_php_file ) && file_exists( $lsx_theme_sass_file ) ) {
-				require_once $scss_php_file;
-
-				$compiler = new \Leafo\ScssPhp\Compiler();
-				$compiler->setFormatter( 'Leafo\ScssPhp\Formatter\Compact' );
-
-				try {
-					$scss = '
+          }
+
+          /**
+           * Transform SCSS to CSS.
+           *
+           * @since 1.0.0
+           */
+          public function scss_to_css( $scss ) {
+               $css                 = '';
+               $scss_php_file       = LSX_CUSTOMIZER_PATH . 'vendor/leafo/scssphp/scss.inc.php';
+               $lsx_theme_sass_file = get_template_directory() . '/assets/css/scss/lsx.scss';
+
+               if ( ! empty( $scss ) && file_exists( $scss_php_file ) && file_exists( $lsx_theme_sass_file ) ) {
+                    require_once $scss_php_file;
+
+                    $compiler = new \Leafo\ScssPhp\Compiler();
+                    $compiler->setFormatter( 'Leafo\ScssPhp\Formatter\Compact' );
+
+                    try {
+                         $scss = '
 						@import "' . LSX_CUSTOMIZER_PATH . '/assets/css/scss/include-media";
 						@import "' . get_template_directory() . '/assets/css/scss/global/lsx-variables";
 						@import "' . get_template_directory() . '/assets/css/scss/global/mixins/colours-helper";
 						' . $scss . '
 					';
 
-					$css = $compiler->compile( $scss );
-				} catch ( \Exception $e ) {
-					$error = $e->getMessage();
-					return "/*\n\n\$error:\n\n{$error}\n\n\$scss:\n\n{$scss} */";
-				}
-			}
-
-			return $css;
-		}
-
-		/**
-		 * Converts a HEX value to RGB.
-		 *
-		 * @since 1.0.0
-		 */
-		public static function hex2rgb( $color ) {
-			$color = trim( $color, '#' );
-
-			if ( strlen( $color ) === 3 ) {
-				$r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
-				$g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
-				$b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
-			} elseif ( strlen( $color ) === 6 ) {
-				$r = hexdec( substr( $color, 0, 2 ) );
-				$g = hexdec( substr( $color, 2, 2 ) );
-				$b = hexdec( substr( $color, 4, 2 ) );
-			} else {
-				return array();
-			}
-
-			return array(
-				'red'   => $r,
-				'green' => $g,
-				'blue'  => $b,
-			);
-		}
-
-		/**
-		 * Retrieves the current color scheme.
-		 *
-		 * @since 1.0.0
-		 */
-		public function get_color_scheme() {
-			global $customizer_colour_choices;
-
-			$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
-			$color_schemes = $customizer_colour_choices;
-
-			if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
-				return $color_schemes[ $color_scheme_option ]['colors'];
-			}
-
-			return $color_schemes['default']['colors'];
-		}
-
-	}
-
-	new LSX_Customizer_Colour();
+                         $css = $compiler->compile( $scss );
+                    } catch ( \Exception $e ) {
+                         $error = $e->getMessage();
+                         return "/*\n\n\$error:\n\n{$error}\n\n\$scss:\n\n{$scss} */";
+                    }
+               }
+
+               return $css;
+          }
+
+          /**
+           * Converts a HEX value to RGB.
+           *
+           * @since 1.0.0
+           */
+          public static function hex2rgb( $color ) {
+               $color = trim( $color, '#' );
+
+               if ( strlen( $color ) === 3 ) {
+                    $r = hexdec( substr( $color, 0, 1 ) . substr( $color, 0, 1 ) );
+                    $g = hexdec( substr( $color, 1, 1 ) . substr( $color, 1, 1 ) );
+                    $b = hexdec( substr( $color, 2, 1 ) . substr( $color, 2, 1 ) );
+               } elseif ( strlen( $color ) === 6 ) {
+                    $r = hexdec( substr( $color, 0, 2 ) );
+                    $g = hexdec( substr( $color, 2, 2 ) );
+                    $b = hexdec( substr( $color, 4, 2 ) );
+               } else {
+                    return array();
+               }
+
+               return array(
+                    'red'   => $r,
+                    'green' => $g,
+                    'blue'  => $b,
+               );
+          }
+
+          /**
+           * Retrieves the current color scheme.
+           *
+           * @since 1.0.0
+           */
+          public function get_color_scheme() {
+               global $customizer_colour_choices;
+
+               $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
+               $color_schemes = $customizer_colour_choices;
+
+               if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
+                    return $color_schemes[ $color_scheme_option ]['colors'];
+               }
+
+               return $color_schemes['default']['colors'];
+          }
+
+     }
+
+     new LSX_Customizer_Colour();
 
 }