themes-wordpress/seedlet/inc/wpcom-customize-preview.js

/**
 * File wpcom-customize-preview.js.
 *
 * Instantly live-update customizer settings in the preview for improved user experience,
 * targeting the updates needed to hide the page title on the homepage on WordPress.com.
 */

( function( $ ) {
	// Hide Front Page Title
	wp.customize( 'hide_front_page_title', function( value ) {
		value.bind( function( to ) {
			if ( true === to ) {
				$( 'body' ).addClass( 'hide-homepage-title' );

			} else {
				$( 'body' ).removeClass( 'hide-homepage-title' );
			}
		} );
	} );

	// Since the plugin handles customizer preview updates via the postMessage transport,
	// we need to manually override the "extra CSS" when a user selects a different color palette.
	wp.customize( 'colors_manager[colors]', function( value ) {
		value.bind( function( to ) {
			const { bg, fg1, fg2, txt, link } = to;
			const extraCSS = `
				:root {
					--global--color-background: ${ bg };
					--global--color-foreground: ${ txt };
					--global--color-primary: ${ link };
					--global--color-secondary: ${ fg1 };
					--global--color-tertiary: ${ fg2 };
				}

				.site-title a {
					background-image: linear-gradient(to right, ${ fg1 } 100%, transparent 100%);
					text-shadow: 1px 0px ${ bg },
								-1px 0px ${ bg },
								-2px 0px ${ bg },
								2px 0px ${ bg },
								-3px 0px ${ bg },
								3px 0px ${ bg },
								-4px 0px ${ bg },
								4px 0px ${ bg },
								-5px 0px ${ bg },
								5px 0px ${ bg };
				}

				/*
				* Custom gradients.
				*/
				.has-hard-diagonal-gradient-background {
					background: linear-gradient(to bottom right, ${ fg1 } 49.9%, ${ fg2 } 50%);
				}

				.has-hard-diagonal-inverted-gradient-background {
					background: linear-gradient(to top left, ${ fg1 } 49.9%, ${ fg2 } 50%);
				}

				.has-diagonal-gradient-background {
					background: linear-gradient(to bottom right, ${ fg1 }, ${ fg2 });
				}

				.has-diagonal-inverted-gradient-background {
					background: linear-gradient(to top left, ${ fg1 }, ${ fg2 });
				}

				.has-hard-horizontal-gradient-background {
					background: linear-gradient(to bottom, ${ fg1 } 50%, ${ fg2 } 50%);
				}

				.has-hard-horizontal-inverted-gradient-background {
					background: linear-gradient(to top, ${ fg1 } 50%, ${ fg2 } 50%);
				}

				.has-horizontal-gradient-background {
					background: linear-gradient(to bottom, ${ fg1 }, ${ fg2 });
				}

				.has-horizontal-inverted-gradient-background {
					background: linear-gradient(to top, ${ fg1 }, ${ fg2 });
				}

				.has-stripe-gradient-background {
					background: linear-gradient(to bottom, transparent 20%, ${ fg1 } 20%, ${ fg1 } 80%, transparent 80%);
				}`;

			// Append an extra style element that overrides the previous extra CSS
			if ( $('#custom-colors-extra-css').length ) {
				$( '#custom-colors-extra-css' ).html( extraCSS );
			} else {
				$( 'head' ).append( `<style id="custom-colors-extra-css">${ extraCSS }</style>` );
			}
		} );
	} );
} )( jQuery );