<?php
add_color_rule( 'bg', '#080a0a', array(
	array( '.site-header', 'background-color' ),
), __( 'Site Header', 'espied' ) );


add_color_rule( 'txt', '#23292b', array(
	array( '.sidebar,
			.js body:after,
			.js .site-main .paging-navigation .nav-previous a:before,
			.js .site-main .paging-navigation .nav-next a:before,
			.js .site-main .paging-navigation .nav-archive a:before,
			.js .site-main .post-navigation .nav-previous a:before,
			.js .site-main .post-navigation .nav-next a:before,
			.js .site-main .post-navigation .nav-archive a:before,
			.js .site-main .image-navigation .nav-previous a:before,
			.js .site-main .image-navigation .nav-next a:before,
			.js .site-main .image-navigation .nav-archive a:before', 'background-color' ),

	// Make sure text are visible on the sidebar
	array( '.sidebar,
			.widget-title,
			.widget-title a,
			.menu-heading,
			.main-navigation ul .current_page_item a,
			.main-navigation ul .current-menu-item a,
			.widget-area .milestone-countdown,
			.widget-area .milestone-message,
			.widget-area .milestone-header,
			.sidebar-toggle:before,
			.social-navigation a:before,
			.dropdown-toggle:after,
			.js .site-main .paging-navigation .nav-previous a:before,
			.js .site-main .paging-navigation .nav-next a:before,
			.js .site-main .paging-navigation .nav-archive a:before,
			.js .site-main .post-navigation .nav-previous a:before,
			.js .site-main .post-navigation .nav-next a:before,
			.js .site-main .post-navigation .nav-archive a:before,
			.js .site-main .image-navigation .nav-previous a:before,
			.js .site-main .image-navigation .nav-next a:before,
			.js .site-main .image-navigation .nav-archive a:before', 'color', 'txt', 16 ),

	// Borders on the sidebar
	array( '.js body:after,
			.sidebar-toggle,
			.js .site-main .paging-navigation .nav-previous a:before,
			.js .site-main .paging-navigation .nav-next a:before,
			.js .site-main .paging-navigation .nav-archive a:before,
			.js .site-main .post-navigation .nav-previous a:before,
			.js .site-main .post-navigation .nav-next a:before,
			.js .site-main .post-navigation .nav-archive a:before,
			.js .site-main .image-navigation .nav-previous a:before,
			.js .site-main .image-navigation .nav-next a:before,
			.js .site-main .image-navigation .nav-archive a:before,
			.main-navigation,
			.main-navigation ul li,
			.widget table,
			.widget th,
			.widget td,
			.widget_archive ul,
			.widget_categories ul,
			.widget_links ul,
			.widget_meta ul,
			.widget_nav_menu ul,
			.widget_pages ul,
			.widget_recent_comments ul,
			.widget_recent_entries ul,
			.widget_jp_blogs_i_follow ul,
			.widget_delicious ul,
			.widgets-list-layout ul,
			.widget_top-clicks ul,
			.widget_top-posts ul,
			.top_rated ul,
			.widget_upcoming_events_widget .upcoming-events ul,
			.widget_archive li,
			.widget_categories li,
			.widget_links li,
			.widget_meta li,
			.widget_nav_menu li,
			.widget_pages li,
			.widget_recent_comments li,
			.widget_recent_entries li,
			.widget_top-posts li,
			.widget_jp_blogs_i_follow li,
			.widget_delicious li,
			.widgets-list-layout li,
			.widget_top-clicks li,
			.widget_top-posts li,
			.top_rated li,
			.widget_upcoming_events_widget .upcoming-events li,
			.widget-area .milestone-header,
			.widget-area .milestone-countdown,
			.widget-area .milestone-message', 'border-color', 'txt', 1.2 ),

	// Some overlay element on the sidebar
	array( '.dropdown-toggle,
			.social-navigation a,
			.widget_calendar thead th,
			.widget-area .milestone-header', 'background-color', 'txt', 1.2 ),

), __( 'Sidebar', 'espied' ) );


add_color_rule( 'link', '#007CAD', array(
	array( '::selection', 'background-color' ),

 	array( '::-moz-selection', 'background-color' ),

 	array( 'button,
 			input[type="button"],
 			input[type="reset"],
 			input[type="submit"],
 			.js .site-main .paging-navigation .nav-previous a:hover:before,
			.js .site-main .paging-navigation .nav-next a:hover:before,
			.js .site-main .paging-navigation .nav-archive a:hover:before,
			.js .site-main .post-navigation .nav-previous a:hover:before,
			.js .site-main .post-navigation .nav-next a:hover:before,
			.js .site-main .post-navigation .nav-archive a:hover:before,
			.js .site-main .image-navigation .nav-previous a:hover:before,
			.js .site-main .image-navigation .nav-next a:hover:before,
			.js .site-main .image-navigation .nav-archive a:hover:before,
			.js .site-main .paging-navigation .nav-previous a:focus:before,
			.js .site-main .paging-navigation .nav-next a:focus:before,
			.js .site-main .paging-navigation .nav-archive a:focus:before,
			.js .site-main .post-navigation .nav-previous a:focus:before,
			.js .site-main .post-navigation .nav-next a:focus:before,
			.js .site-main .post-navigation .nav-archive a:focus:before,
			.js .site-main .image-navigation .nav-previous a:focus:before,
			.js .site-main .image-navigation .nav-next a:focus:before,
			.js .site-main .image-navigation .nav-archive a:focus:before,
			.js .site-main .paging-navigation .nav-previous a:hover,
			.js .site-main .paging-navigation .nav-next a:hover,
			.js .site-main .paging-navigation .nav-archive a:hover,
			.js .site-main .post-navigation .nav-previous a:hover,
			.js .site-main .post-navigation .nav-next a:hover,
			.js .site-main .post-navigation .nav-archive a:hover,
			.js .site-main .image-navigation .nav-previous a:hover,
			.js .site-main .image-navigation .nav-next a:hover,
			.js .site-main .image-navigation .nav-archive a:hover,
			.js .site-main .paging-navigation .nav-previous a:focus,
			.js .site-main .paging-navigation .nav-next a:focus,
			.js .site-main .paging-navigation .nav-archive a:focus,
			.js .site-main .post-navigation .nav-previous a:focus,
			.js .site-main .post-navigation .nav-next a:focus,
			.js .site-main .post-navigation .nav-archive a:focus,
			.js .site-main .image-navigation .nav-previous a:focus,
			.js .site-main .image-navigation .nav-next a:focus,
			.js .site-main .image-navigation .nav-archive a:focus,
			.sidebar-toggle:hover,
			.sidebar-toggle:focus,
			.sidebar-toggle:active,
			.page-links a,
			.comment-list .reply a,
			.post-thumbnail-wrapper,
			#infinite-handle span', 'background-color' ),

 	array( 'button:hover,
 			button:focus,
 			button:active,
			input[type="button"]:hover,
			input[type="button"]:focus,
			input[type="button"]:active,
			input[type="reset"]:hover,
			input[type="reset"]:focus,
			input[type="reset"]:active,
			input[type="submit"]:hover,
			input[type="submit"]:focus,
			input[type="submit"]:active,
			.page-links a:hover,
			.comment-list .reply a:hover,
 			.comment-list .reply a:focus,
 			.comment-list .reply a:active,
			#infinite-handle span:hover', 'background-color', '+0.8' ),

 	array( '.view-link:hover,
 			.view-link:focus,
 			.view-link:active', 'color' ),

 	array( '.entry-content .page-links a,
 			.sidebar-toggle:hover,
			.js .site-main .paging-navigation .nav-previous a:hover:before,
			.js .site-main .paging-navigation .nav-next a:hover:before,
			.js .site-main .paging-navigation .nav-archive a:hover:before,
			.js .site-main .post-navigation .nav-previous a:hover:before,
			.js .site-main .post-navigation .nav-next a:hover:before,
			.js .site-main .post-navigation .nav-archive a:hover:before,
			.js .site-main .image-navigation .nav-previous a:hover:before,
			.js .site-main .image-navigation .nav-next a:hover:before,
			.js .site-main .image-navigation .nav-archive a:hover:before,
			.js .site-main .paging-navigation .nav-previous a:focus:before,
			.js .site-main .paging-navigation .nav-next a:focus:before,
			.js .site-main .paging-navigation .nav-archive a:focus:before,
			.js .site-main .post-navigation .nav-previous a:focus:before,
			.js .site-main .post-navigation .nav-next a:focus:before,
			.js .site-main .post-navigation .nav-archive a:focus:before,
			.js .site-main .image-navigation .nav-previous a:focus:before,
			.js .site-main .image-navigation .nav-next a:focus:before,
			.js .site-main .image-navigation .nav-archive a:focus:before', 'border-color' ),

	array( '.entry-content .page-links a:hover', 'border-color', '+0.8' ),

 	// Make sure it stays visible against white.
 	array( 'a', 'color', '#fff', 4.5 ),

 	// Needs to be the same color as above.
 	array( '.page-content a,
			.entry-content a,
			.entry-summary a,
			.comment-content a', 'border-color', '#fff', 4.5 ),

 	// hover & focus & active
	// Little more contrast for hover.
 	array( 'a:hover,
 			a:active,
 			a:focus,
 			.entry-title a:hover,
 			.entry-title a:active,
 			.entry-title a:focus,
 			.entry-meta a:hover,
 			.entry-meta a:active,
 			.entry-meta a:focus,
			.comment-list .trackback a:hover,
			.comment-list .trackback a:active,
			.comment-list .trackback a:focus,
			.comment-list .pingback a:hover,
			.comment-list .pingback a:active,
			.comment-list .pingback a:focus,
			.comment-author a:hover,
			.comment-author a:active,
			.comment-author a:focus,
			.comment-metadata a:hover,
			.comment-metadata a:active,
			.comment-metadata a:focus,
			.comment-reply-title a:hover,
			.comment-reply-title a:active,
			.comment-reply-title a:focus,
			.site-info a:hover,
			.site-info a:active,
			.site-info a:focus,
			#infinite-footer .blog-info a:hover,
			#infinite-footer .blog-info a:active,
			#infinite-footer .blog-info a:focus,
			#infinite-footer .blog-credits a:hover,
			#infinite-footer .blog-credits a:active,
			#infinite-footer .blog-credits a:focus', 'color', '#fff', 6.5 ),

 	array( '.page-content a:hover,
 			.page-content a:active,
 			.page-content a:focus,
			.entry-content a:hover,
			.entry-content a:active,
			.entry-content a:focus,
			.entry-summary a:hover,
			.entry-summary a:active,
			.entry-summary a:focus,
			.comment-content a:hover,
			.comment-content a:active,
			.comment-content a:focus', 'border-color', '#fff', 6.5 ),

), __( 'Links', 'espied' ) );


add_color_rule( 'fg1', '#58c7f4', array(

 	array( '.widget button,
			.widget input[type="button"],
			.widget input[type="reset"],
			.widget input[type="submit"],
			.widget_calendar tbody a,
			.dropdown-toggle:hover,
			.dropdown-toggle:focus,
			.social-navigation a:hover,
			.social-navigation a:focus', 'background-color' ),

 	array( '.widget button:hover,
 			.widget button:focus,
 			.widget button:active,
			.widget input[type="button"]:hover,
			.widget input[type="button"]:focus,
			.widget input[type="button"]:active,
			.widget input[type="reset"]:hover,
			.widget input[type="reset"]:focus,
			.widget input[type="reset"]:active,
			.widget input[type="submit"]:hover,
			.widget input[type="submit"]:focus,
			.widget input[type="submit"]:active,
			.widget_calendar tbody a:hover,
			.widget_calendar tbody a:active,
			.widget_calendar tbody a:focus', 'background-color', '+0.8'),

	// Make sure it stays visible
 	array( '.widget a,
 			.wp-caption a,
 			.main-navigation a,
 			.widget_flickr #flickr_badge_uber_wrapper a:link,
 			.widget_flickr #flickr_badge_uber_wrapper a:active,
 			.widget_flickr #flickr_badge_uber_wrapper a:visited', 'color', 'txt', 8 ),

 	// Needs to be the same color as above.
 	array( '.widget_text a', 'border-color', 'txt' ),

 	// hover & focus & active
 	// little more contrast for hover
 	array( '.widget a:hover,
 			.widget a:active,
 			.widget a:focus,
 			.wp-caption a:hover,
 			.wp-caption a:active,
 			.wp-caption a:focus,
 			.main-navigation a:hover,
 			.main-navigation a:active,
 			.main-navigation a:focus,
 			.widget_flickr #flickr_badge_uber_wrapper a:hover', 'color', 'txt', 10 ),

 	array( '.widget_text a:hover,
 			.widget_text a:active,
 			.widget_text a:focus', 'border-color', 'txt', 10 ),

), __( 'Links in the sidebar', 'espied' ) );


add_color_rule( 'extra', '#ffffff', array(
	// white text on bg
	array( '.site-title a,
			.site-title a:hover,
			.site-description', 'color', 'bg', 16 ),

	// white text on link
	array( '::selection', 'color', 'link', 16 ),

	array( '::-moz-selection', 'color', 'link', 16 ),

	array( 'button,
			input[type="button"],
			input[type="reset"],
			input[type="submit"],
 			.js .site-main .paging-navigation .nav-previous a:hover:before,
			.js .site-main .paging-navigation .nav-next a:hover:before,
			.js .site-main .paging-navigation .nav-archive a:hover:before,
			.js .site-main .post-navigation .nav-previous a:hover:before,
			.js .site-main .post-navigation .nav-next a:hover:before,
			.js .site-main .post-navigation .nav-archive a:hover:before,
			.js .site-main .image-navigation .nav-previous a:hover:before,
			.js .site-main .image-navigation .nav-next a:hover:before,
			.js .site-main .image-navigation .nav-archive a:hover:before,
			.js .site-main .paging-navigation .nav-previous a:hover,
			.js .site-main .paging-navigation .nav-next a:hover,
			.js .site-main .paging-navigation .nav-archive a:hover,
			.js .site-main .post-navigation .nav-previous a:hover,
			.js .site-main .post-navigation .nav-next a:hover,
			.js .site-main .post-navigation .nav-archive a:hover,
			.js .site-main .image-navigation .nav-previous a:hover,
			.js .site-main .image-navigation .nav-next a:hover,
			.js .site-main .image-navigation .nav-archive a:hover,
			.js .site-main .paging-navigation .nav-previous a span,
			.js .site-main .paging-navigation .nav-next a span,
			.js .site-main .paging-navigation .nav-archive a span,
			.js .site-main .post-navigation .nav-previous a span,
			.js .site-main .post-navigation .nav-next a span,
			.js .site-main .post-navigation .nav-archive a span,
			.js .site-main .image-navigation .nav-previous a span,
			.js .site-main .image-navigation .nav-next a span,
			.js .site-main .image-navigation .nav-archive a span,
			.sidebar-toggle:hover:before,
			.page-links a,
			.page-links a:hover,
			.comment-list .reply a,
			.comment-list .reply a:hover,
			.comment-list .reply a:focus,
			.comment-list .reply a:active,
			.post-type-archive-jetpack-portfolio .jetpack-portfolio .entry-title a,
			.tax-jetpack-portfolio-type .jetpack-portfolio .entry-title a,
			.tax-jetpack-portfolio-tag .jetpack-portfolio .entry-title a,
			.page-template-page-templatesportfolio-page-php .jetpack-portfolio .entry-title a,
			.project-navigation .jetpack-portfolio .entry-title a,
			.post-type-archive-jetpack-portfolio .jetpack-portfolio .entry-meta,
			.tax-jetpack-portfolio-type .jetpack-portfolio .entry-meta,
			.tax-jetpack-portfolio-tag .jetpack-portfolio .entry-meta,
			.page-template-page-templatesportfolio-page-php .jetpack-portfolio .entry-meta,
			.project-navigation .jetpack-portfolio .entry-meta,
			.post-type-archive-jetpack-portfolio .jetpack-portfolio .entry-meta a,
			.tax-jetpack-portfolio-type .jetpack-portfolio .entry-meta a,
			.tax-jetpack-portfolio-tag .jetpack-portfolio .entry-meta a,
			.page-template-page-templatesportfolio-page-php .jetpack-portfolio .entry-meta a,
			.project-navigation .jetpack-portfolio .entry-meta a,
			.view-link,
			#infinite-handle span', 'color', 'link', 16 ),

	array( '.view-link,
			.view-link:hover,
			.view-link:focus,
			.view-link:active,
			.post-type-archive-jetpack-portfolio .jetpack-portfolio .entry-title a:hover,
			.tax-jetpack-portfolio-type .jetpack-portfolio .entry-title a:hover,
			.tax-jetpack-portfolio-tag .jetpack-portfolio .entry-title a:hover,
			.page-template-page-templatesportfolio-page-php .jetpack-portfolio .entry-title a:hover,
			.project-navigation .jetpack-portfolio .entry-title a:hover,
			.post-type-archive-jetpack-portfolio .jetpack-portfolio .entry-meta a:hover,
			.tax-jetpack-portfolio-type .jetpack-portfolio .entry-meta a:hover,
			.tax-jetpack-portfolio-tag .jetpack-portfolio .entry-meta a:hover,
			.page-template-page-templatesportfolio-page-php .jetpack-portfolio .entry-meta a:hover,
			.project-navigation .jetpack-portfolio .entry-meta a:hover', 'border-color', 'link', 16 ),

	array( '.view-link:hover,
			.view-link:focus,
			.view-link:active', 'background-color', 'link', 16 ),

	// white text on fg1
	array( '.widget button,
			.widget input[type="button"],
			.widget input[type="reset"],
			.widget input[type="submit"],
			.widget_calendar tbody a,
			.widget_calendar tbody a:hover,
			.widget_calendar tbody a:focus,
			.social-navigation a:hover:before,
			.social-navigation a:focus:before,
			.dropdown-toggle:hover:after,
			.dropdown-toggle:focus:after', 'color', 'fg1', 16 )
) );

add_color_rule( 'fg2', '#ffffff', array(
) );

add_theme_support( 'custom_colors_extra_css', 'espied_extra_css' );
function espied_extra_css() { ?>
	.sidebar-toggle {
		background-color: transparent;
	}

	#comments #respond #comment-submit {
		background-color: #23292b !important;
		border: 2px solid #23292b !important;
		color: #fff !important;
		padding: 7px 24px !important;
	}

	#comments #respond #comment-submit:hover,
	#comments #respond #comment-submit:focus {
		background-color: #fff !important;
		border: 2px solid #23292b !important;
		color: #23292b !important;
	}

	@media screen and (max-width: 47.9375em) {
		.js .site-main .paging-navigation .nav-previous a:hover,
		.js .site-main .paging-navigation .nav-next a:hover,
		.js .site-main .paging-navigation .nav-archive a:hover,
		.js .site-main .post-navigation .nav-previous a:hover,
		.js .site-main .post-navigation .nav-next a:hover,
		.js .site-main .post-navigation .nav-archive a:hover,
		.js .site-main .image-navigation .nav-previous a:hover,
		.js .site-main .image-navigation .nav-next a:hover,
		.js .site-main .image-navigation .nav-archive a:hover {
			background-color: transparent !important;
		}

		.js .site-main .paging-navigation .nav-previous a span,
		.js .site-main .paging-navigation .nav-next a span,
		.js .site-main .paging-navigation .nav-archive a span,
		.js .site-main .post-navigation .nav-previous a span,
		.js .site-main .post-navigation .nav-next a span,
		.js .site-main .post-navigation .nav-archive a span,
		.js .site-main .image-navigation .nav-previous a span,
		.js .site-main .image-navigation .nav-next a span,
		.js .site-main .image-navigation .nav-archive a span {
			color: #737678 !important;
		}
	}
<?php
}

/* Additional color palettes */
add_color_palette( array(
	'#080a09',
	'#232b27',
	'#1b8748',
	'#1d9f53',
	'',
), 'Green' );

add_color_palette( array(
	'#0a0808',
	'#2b2423',
	'#e0311e',
	'#e35d4e',
	'',
), 'Red' );

add_color_palette( array(
	'#edf1f2',
	'#edf1f2',
	'#007cad',
	'#0074a3',
	'',
), 'Light with Blue' );

add_color_palette( array(
	'#edf2f1',
	'#edf2f1',
	'#0c816a',
	'#0a7963',
	'',
), 'Light with Green' );