New appearance settings added and legacy colors removed

assets/core/scss/tokens/_colors.scss

@@ -6,16 +6,16 @@
 // =============================================================================
 
 // Brand Colors
-$tutor-brand-100: #f6f8fe;
-$tutor-brand-200: #e4ebfc;
-$tutor-brand-300: #dbe4fa;
-$tutor-brand-400: #a4bcf4;
-$tutor-brand-500: #4979e8;
-$tutor-brand-600: #3e64de;
-$tutor-brand-700: #2b49ca;
-$tutor-brand-800: #293da4;
-$tutor-brand-900: #263782;
-$tutor-brand-950: #1c234f;
+$tutor-brand-100: var(--tutor-brand-100, #f6f8fe);
+$tutor-brand-200: var(--tutor-brand-200, #e4ebfc);
+$tutor-brand-300: var(--tutor-brand-300, #dbe4fa);
+$tutor-brand-400: var(--tutor-brand-400, #a4bcf4);
+$tutor-brand-500: var(--tutor-brand-500, #4979e8);
+$tutor-brand-600: var(--tutor-brand-600, #3e64de);
+$tutor-brand-700: var(--tutor-brand-700, #2b49ca);
+$tutor-brand-800: var(--tutor-brand-800, #293da4);
+$tutor-brand-900: var(--tutor-brand-900, #263782);
+$tutor-brand-950: var(--tutor-brand-950, #1c234f);
 
 // Gray Colors
 $tutor-gray-1: #ffffff;

assets/src/js/admin-dashboard/segments/reset.js

@@ -47,7 +47,7 @@ const resetConfirmation = () => {
 					if (xhttp.readyState === 4) {
 						let pageData = JSON.parse(xhttp.response).data;
 						pageData.forEach((item) => {
-							const field_types_associate = ['color_preset', 'upload_full', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number'];
+							const field_types_associate = ['color_field', 'upload_full', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'radio_horizontal_image', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number'];
 
 							if (field_types_associate.includes(item.type)) {
 								let itemName = 'tutor_option[' + item.key + ']';
@@ -60,36 +60,14 @@ const resetConfirmation = () => {
 										elementOption.selected = typeof item.default === 'number' ? elementOption.value === item.default : item.default.includes(elementOption.value);
 									});
 
-								} else if (item.type == 'color_preset') {
-
-									let presetItems = elementByName(itemName);
-									presetItems.forEach((presetItem) => {
-										let labelClasses = presetItem.parentElement.classList;
-										item.default.includes(presetItem.value) ? labelClasses.add('is-checked') : labelClasses.remove('is-checked');
-										presetItem.checked = item.default.includes(presetItem.value) ? true : false;
-									})
-
-									item.fields.forEach((fields) => {
-										if (fields.key === item.default) {
-											fields.colors.forEach((picker) => {
-												let pickerName = 'tutor_option[' + picker.slug + ']';
-												let pickerItem = elementByName(pickerName)[0];
-												let pickerItemParent = pickerItem.parentElement;
-												pickerItem.value = picker.value;
-												pickerItem.nextElementSibling.innerText = picker.value;
-
-												pickerItemParent.style.borderColor = picker.value;
-												pickerItemParent.style.boxShadow = `inset 0 0 0 1px ${picker.value}`;
-
-												setTimeout(() => {
-													pickerItemParent.style.borderColor = '#cdcfd5';
-													pickerItemParent.style.boxShadow = 'none';
-												}, 5000);
-											})
-										}
-									})
-
-								} else if (item.type == 'checkbox_horizontal' || item.type == 'checkbox_vertical' || item.type == 'radio_horizontal' || item.type == 'radio_horizontal_full' || item.type == 'radio_vertical' || item.type == 'group_radio' || item.type == 'group_radio_full_3') {
+								} else if (item.type == 'color_field') {
+									let pickerName = 'tutor_option[' + item.key + ']';
+									let pickerItem = elementByName(pickerName)[0];
+									if (pickerItem) {
+										pickerItem.value = item.default;
+										pickerItem.nextElementSibling.innerText = item.default;
+									}
+								} else if (item.type == 'checkbox_horizontal' || item.type == 'checkbox_vertical' || item.type == 'radio_horizontal' || item.type == 'radio_horizontal_full' || item.type == 'radio_horizontal_image' || item.type == 'radio_vertical' || item.type == 'group_radio' || item.type == 'group_radio_full_3') {
 
 									if (item.type == 'checkbox_horizontal') {
 										Object.keys(item.options).forEach((optionKeys) => {

assets/src/scss/admin-dashboard/v2/components/_custom-input-field.scss

@@ -71,6 +71,60 @@
 			}
 		}
 	}
+
+	&.radio-thumbnail-image {
+		display: flex;
+		align-items: center;
+		justify-content: end;
+		gap: 16px;
+
+		label {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-self: center;
+			padding-block: 8px;
+			position: relative;
+			border: 1px solid #c0c3cb;
+			border-radius: 6px;
+			height: 90px;
+			width: 88px;
+
+			img {
+				max-width: 100%;
+			}
+
+			&:before {
+				content: "";
+				position: absolute;
+				right: -8px;
+				top: -8px;
+				height: 16px;
+				width: 16px;
+				border-radius: 50%;
+				background-size: 8px;
+				background-color: transparent;
+				background-repeat: no-repeat;
+				background-position: 50%;
+				transition: 0.3s;
+			}
+
+			&:has(input[type="radio"]:checked) {
+				border-color: var(--tutor-color-primary);
+
+				&:before {
+					background-color: var(--tutor-color-primary);
+					@include svg-check-icon-2;
+				}
+			}
+
+			.image-title {
+				color: #262626;
+				font-size: 13px;
+				line-height: 18px;
+			}
+		}
+	}
 }
 
 .items-per-row-label {

assets/src/scss/frontend/dashboard/settings/_social-accounts.scss

@@ -24,6 +24,6 @@
   &-icon {
     position: relative;
     color: $tutor-icon-idle;
-    top: 38px;
+    top: 37px;
   }
 }

assets/src/scss/frontend/kids/_dashboard.scss

@@ -179,6 +179,10 @@
     border-radius: $tutor-radius-5xl;
   }
 
+  .tutor-account-section .tutor-account-cover-photo {
+    border-radius: $tutor-radius-4xl;
+  }
+
   .tutor-review-card {
     .tutor-review-form {
       border-radius: $tutor-radius-6xl;

classes/Assets.php

@@ -181,7 +181,7 @@
 				function ( $file ) {
 					return basename( $file, '.svg' );
 				},
 				glob( tutor()->path . 'assets/icons/kids/*.svg' ) ?: array()
 			);
 		}
 
@@ -571,11 +571,25 @@
 			'tutor_gray_color'          => '#CDCFD5',
 		);
 
+		$brand_color = tutor_utils()->get_brand_color();
+
 		$color_string = '';
 		foreach ( $colors as $key => $property ) {
 			$fallback_color = isset( $fallback_colors[ $key ] ) ? $fallback_colors[ $key ] : '#212327';
-			$color          = tutor_utils()->get_option( $key, $fallback_color );
-			$color_rgb      = tutor_utils()->hex2rgb( $color );
+			$color          = $fallback_color;
+
+			if ( Options_V2::DEFAULT_BRAND_COLOR !== $brand_color ) {
+				if ( 'tutor_primary_color' === $key ) {
+					$color = $brand_color;
+				}
+
+				if ( 'tutor_primary_hover_color' === $key ) {
+					$palette = $this->generate_color_palette( $brand_color );
+					$color   = $palette[700];
+				}
+			}
+
+			$color_rgb = tutor_utils()->hex2rgb( $color );
 
 			if ( is_admin() && isset( $admin_colors[ $property ] ) ) {
 				$color     = $admin_colors[ $property ];
@@ -594,6 +608,81 @@
 		return ':root{' . $color_string . '}';
 	}
 
+	/**
+	 * Generate color palette
+	 *
+	 * @since 4.0.0
+	 *
+	 * @param string $base_hex HEX color code.
+	 *
+	 * @return array
+	 */
+	private function generate_color_palette( $base_hex ) {
+		$base = tutor_utils()->hex_to_hsl( $base_hex );
+
+		// Mapping of [Hue-Shift, Saturation-Shift, Target-Lightness].
+		$rules = array(
+			100 => array( -1, 3, 97.5 ),
+			200 => array( -3, 1, 94.1 ),
+			300 => array( -3, -2, 92.2 ),
+			400 => array( -4, 0, 79.6 ),
+			500 => array( -4, 5, 59.8 ),
+			600 => array( 0, 0, $base['l'] ),
+			700 => array( 3, -7, 48.0 ),
+			800 => array( 4, -12, 40.2 ),
+			900 => array( 5, -17, 33.1 ),
+			950 => array( 6, -24, 20.8 ),
+		);
+
+		$palette = array();
+		foreach ( $rules as $weight => $modifier ) {
+			if ( 600 === $weight ) {
+				$palette[ $weight ] = strtolower( $base_hex );
+				continue;
+			}
+
+			$new_h = fmod( ( $base['h'] + $modifier[0] + 360 ), 360 );
+			$new_s = max( 0, min( 100, $base['s'] + $modifier[1] ) );
+			$new_l = max( 0, min( 100, $modifier[2] ) );
+
+			$palette[ $weight ] = tutor_utils()->hsl_to_hex( $new_h, $new_s, $new_l );
+		}
+
+		return $palette;
+	}
+
+	/**
+	 * Load core color palette
+	 *
+	 * @since 4.0.0
+	 *
+	 * @param string $brand_color Base color code.
+	 *
+	 * @return string
+	 */
+	private function load_core_color_palette( $brand_color ) {
+		if ( empty( $brand_color ) ) {
+			return '';
+		}
+
+		$palette = $this->generate_color_palette( $brand_color );
+
+		return "
+			:root {
+			--tutor-brand-100: {$palette[100]};
+			--tutor-brand-200: {$palette[200]};
+			--tutor-brand-300: {$palette[300]};
+			--tutor-brand-400: {$palette[400]};
+			--tutor-brand-500: {$palette[500]};
+			--tutor-brand-600: {$palette[600]};
+			--tutor-brand-700: {$palette[700]};
+			--tutor-brand-800: {$palette[800]};
+			--tutor-brand-900: {$palette[900]};
+			--tutor-brand-950: {$palette[950]};
+			}
+		";
+	}
+
 	/**
 	 * Add Tinymce button for placing shortcode
 	 *
@@ -847,6 +936,12 @@
 
 		wp_localize_script( 'tutor-core', '_tutorobject', $localize_data );
 
+		// Generate color palette from user selected brand color and add to the root.
+		$brand_color = tutor_utils()->get_brand_color();
+		if ( Options_V2::DEFAULT_BRAND_COLOR !== $brand_color ) {
+			wp_add_inline_style( 'tutor-core', $this->load_core_color_palette( $brand_color ) );
+		}
+
 		if ( $is_dashboard ) {
 			wp_enqueue_style( 'tutor-dashboard', $dashboard_css_url, array(), $version );
 			wp_enqueue_script( 'tutor-dashboard', $dashboard_js_url, array( 'tutor-core', 'wp-i18n' ), $version, true );