Make it work with css for now

.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+phpcs.xml
+phpunit.xml
+Thumbs.db
+wp-cli.local.yml
+node_modules/
+*.sql
+*.tar.gz
+*.zip
+*.map
+.sass-cache
+
+/vendor/

assets/js/wpzoom-style-switcher.js

@@ -4,10 +4,20 @@
 $(function () {
 
 
-   $("#panel a").click(function(e){
+$( "#panel a" ).on( 'click', function(e){
 	e.preventDefault();
-		$('#panel').find('a.active').removeClass("active");
+
+	$('#panel').find('a.active').removeClass("active");
 		$(this).addClass("active");
+		$('#wpzoom-theme-css').remove();
+
+		var href = $(this).attr('href');
+		var link_stylesheet = '<link rel="stylesheet" id="wpzoom-theme-css" class=type="text/css" href="' + href + '">';
+
+		$('head').append( link_stylesheet );
+
+		//console.log( link_stylesheet );
+		//return false;
    });  
 
 });
@@ -18,7 +28,7 @@ $(function () {
 jQuery(document).ready(function(){
 	jQuery(".wpzoom-style-picker").fadeIn();
 
-	jQuery(".wpzoom-style-picker .close-button").bind("click", function(e){
+	jQuery(".wpzoom-style-picker .close-button").on("click", function(e){
 		jQuery(".wpzoom-style-picker").toggleClass("closed");
 		e.preventDefault();
 	});
@@ -38,7 +48,7 @@ jQuery(document).ready(function(){
 		});
 	});
 
-	jQuery('label[id^="wpzoom-style-picker-"]').bind( "click" , function(e){
+	jQuery('label[id^="wpzoom-style-picker-"]').on( "click" , function(e){
 		var $inputid = "#" + jQuery(this).attr( 'data-input' );
 		var $input = jQuery( $inputid );
 
@@ -66,7 +76,7 @@ jQuery(document).ready(function(){
 		jQuery(this).data("old", jQuery(this).val() );
 	});
 
-	jQuery('[name^="wpzoom-style-picker-"]').bind( "change" , function(e){
+	jQuery('[name^="wpzoom-style-picker-"]').on( "change" , function(e){
 		jQuery(this).data("new", jQuery(this).val());
 
 		var $selector = jQuery(this).attr("data-selector");

assets/variations/bitter.css

@@ -0,0 +1,6 @@
+:root {
+	--wp--preset--color--primary:#D80032;
+}
+.wp-block-button__link {
+	background-color: red;
+}

assets/variations/yeseva-one.css

@@ -0,0 +1,3 @@
+:root {
+	--wp--preset--color--primary:#40916C;
+}

wpzoom-style-switcher.php

@@ -65,7 +65,7 @@ public static function instance() {
 	 */
 	public function __construct() {
 
-		add_action( 'wp_head', array( $this, 'output_css' ) );
+		//add_action( 'wp_head', array( $this, 'output_css' ) );
 
 		add_action( 'wp_footer', array( $this, 'output_switcher' ) );
 
@@ -76,7 +76,42 @@ public function __construct() {
 
 	public function output_switcher() {
 
-		$styles = WP_Theme_JSON_Resolver::get_style_variations();
+		//$styles = WP_Theme_JSON_Resolver::get_style_variations();
+
+		$style_directory = WPZOOM_STYLE_SWITCHER_URL . 'assets/variations/';
+
+		$styles = array(
+			array(
+				'title' => 'Default',
+				'css'   => $style_directory . 'default.css',
+				'color' => '#fff'
+			),
+			array(
+				'title' => 'Bitter',
+				'css'   => $style_directory . 'bitter.css',
+				'color' => '#D80032'
+			),
+			array(
+				'title' => 'Epilogue',
+				'css'   => $style_directory . 'epilogue.css',
+				'color' => '#FFD100'
+			),
+			array(
+				'title' => 'Montserrat',
+				'css'   => $style_directory . 'montserrat.css',
+				'color' => '#5A13F1'
+			),
+			array(
+				'title' => 'Poppins',
+				'css'   => $style_directory . 'poppins.css',
+				'color' => '#FF9505'
+			),
+			array(
+				'title' => 'Yeseva One',
+				'css'   => $style_directory . 'yeseva-one.css',
+				'color' => '#40916C'
+			)
+		);
 
 		if( empty( $styles ) ) {
 			return;
@@ -88,11 +123,10 @@ public function output_switcher() {
 						<ul id="navigation">
                 			<li>
                  				<div id="panel">
-                    				<div style="padding:10px 0; min-height: 50px;">
-                         				<a title="Default" class="default active" href="#"><span></span></a>';
+                    				<div style="padding:10px 0; min-height: 50px;">';
 										 foreach( $styles as $style ) {
-											$background = isset( $style['settings']['color']['palette']['theme'][0]['color'] ) ? ' style="background-color:' . $style['settings']['color']['palette']['theme'][0]['color'] . '"' : '';
-											$html .= '<a href="#" title="' . $style['title'] . '" class="' . sanitize_title( $style['title'] )  . '" data-style-variation="' . sanitize_title( $style['title'] ) . '"><span ' . $background . '></span></a>';
+											$background = isset( $style['color'] ) ? ' style="background-color:' . $style['color'] . '"' : '';
+											$html .= '<a href="' . $style['css'] . '" title="' . $style['title'] . '" class="' . sanitize_title( $style['title'] )  . '" data-style-variation="' . sanitize_title( $style['title'] ) . '"><span ' . $background . '></span></a>';
 										 }
 		$html .=						'<div class="clear"></div>
                      				</div>
@@ -108,18 +142,6 @@ public function output_switcher() {
 		echo $html;
 	}
 
-	public function output_css() {
-
-		$css = get_block_editor_theme_styles();
-
-		//print_r( $wp_styles );
-
-		$data = wp_get_global_settings();
-
-		//print_r( $data );
-
-	}
-
 	/**
 	 * Enqueue plugin styles.
 	 */
@@ -145,14 +167,6 @@ public function enqueue_js() {
 			WPZOOM_STYLE_SWITCHER_VERSION,
 			true 
 		);
-		wp_enqueue_script( 
-			'wpzoom-style-switcher-values-js', 
-			WPZOOM_STYLE_SWITCHER_URL . 'assets/js/wpzoom-style-switcher-values.js',
-			array( 'jquery' ), 
-			WPZOOM_STYLE_SWITCHER_VERSION,
-			true 
-		);
-
 	}