WP Customizer JS Template not saving color field

I'm trying to create a custom typography control, I'm having problem saving the value of the color, please take a look at my code:

?php
class Customizer_Typo_Control_Typography extends WP_Customize_Control {

/**
 * The type of customize control being rendered.
 */
public $type = 'typography';

/**
 * Array
 */
public $l10n = array();

/**
 * Set up our control.
 */
public function __construct( $manager, $id, $args = array() ) {

    // Let the parent class do its thing.
    parent::__construct( $manager, $id, $args );

    // Make sure we have labels.
    $this-l10n = wp_parse_args(
        $this-l10n,
        array(
            'color'       = esc_html__( 'Font Color',   'ctypo' ),
        )
    );
}

/**
 * Add custom parameters to pass to the JS via JSON.
 */
public function to_json() {
    parent::to_json();

    // Loop through each of the settings and set up the data for it.
    foreach ( $this-settings as $setting_key = $setting_id ) {

        $this-json[ $setting_key ] = array(
            'link'  = $this-get_link( $setting_key ),
            'value' = $this-value( $setting_key ),
            'label' = isset( $this-l10n[ $setting_key ] ) ? $this-l10n[ $setting_key ] : ''
        );

    }
}

/**
 * Underscore JS template to handle the control's output.
 */
public function content_template() { ?

    # if ( data.label ) { #
        span class="customize-control-title"{{ data.label }}/span
    # } #

    # if ( data.description ) { #
        span class="description customize-control-description"{{{ data.description }}}/span
    # } #

    ul

    # if ( data.color ) { #

        li class="typography-font-color"

            # if ( data.color.label ) { #
                span class="customize-control-title"{{ data.color.label }}/span
            # } #

        input type="text" data-default-color="{{ data.color.default }}" value="{{ data.color.value }}" class="color-picker" {{{ data.color.link }}} /
        /li
    # } #


    /ul
?php } }

And here is how i print the option:

  $wp_customize-add_setting( 'p_font_color',   
  array( 'default' = '#666111',     
    'sanitize_callback' = 'sanitize_hex_color',              
    'transport' = 'postMessage' ) 
  );

 $wp_customize-add_control(
new Customizer_Typo_Control_Typography(
    $wp_customize,
    'p_typography',
    array(
        'label'       = esc_html__( 'Paragraph Typography', 'ctypo' ),
        'description' = __( 'Select how you want your paragraphs to appear.', 'ctypo' ),
        'section'     = 'p_typography',

        'settings'    = array(
            'color'       = 'p_font_color',
        ),

        'l10n'        = array(),
    )
)

);