Allow more theme colours to be used

app/Front/Front.php

@@ -83,10 +83,12 @@ class Front {
 	 */
 	public function get_kudos_root_styles(): string {
 
-		$primary          = Settings::get_setting( 'theme_color' );
+		$theme_colours    = Settings::get_setting( 'theme_colors' );
+
+		$primary          = isset($theme_colours['primary']) ? $theme_colours['primary'] : '#ff9f1c';
 		$primary_dark     = Utils::color_luminance( $primary, '-0.06' );
 		$primary_darker   = Utils::color_luminance( $primary, '-0.09' );
-		$secondary        = '#2ec4b6';
+		$secondary        = isset($theme_colours['secondary']) ? $theme_colours['secondary'] : '#2ec4b6';
 		$secondary_dark   = Utils::color_luminance( $secondary, '-0.06' );
 		$secondary_darker = Utils::color_luminance( $secondary, '-0.09' );
 
@@ -178,7 +180,7 @@ class Front {
 			$handle,
 			'kudos',
 			[
-				'theme_color' => Settings::get_setting( 'theme_color' ),
+				'color_primary' => Settings::get_setting( 'color_primary' ),
 			]
 		);
 		wp_set_script_translations( $handle, 'kudos-donations', KUDOS_PLUGIN_DIR . '/languages' );

app/Helpers/Settings.php

@@ -97,10 +97,25 @@ class Settings {
 					'type'         => 'string',
 					'show_in_rest' => true,
 				],
-				'theme_color'           => [
-					'type'         => 'string',
-					'show_in_rest' => true,
-					'default'      => '#ff9f1c',
+				'theme_colors'           => [
+					'type'              => 'object',
+					'show_in_rest'      => [
+						'schema' => [
+							'type'  => 'object',
+							'properties' => [
+								'primary' => [
+									'type' => 'string'
+								],
+								'secondary' => [
+									'type' => 'string'
+								],
+							]
+						]
+					],
+					'default' => [
+						'primary' => '#ff9f1c',
+						'secondary' => '#2ec4b6'
+					]
 				],
 				'address_enabled'       => [
 					'type'         => 'boolean',

app/Service/ActivatorService.php

@@ -79,6 +79,13 @@ class ActivatorService {
 				}
 			}
 
+			if ( version_compare( $old_version, '2.3.2', '<' ) ) {
+
+				// Setting now replaced by 'theme_colors'
+				Settings::remove_setting( 'theme_color' );
+
+			}
+
 		}
 
 		self::create_donors_table();

src/js/Settings/Components/Panels/ThemePanel.jsx

@@ -12,16 +12,15 @@ const ThemePanel = (props) => {
 
     return (
 
-        <SettingCard title={"Theme colour"} id="themeColor">
+        <SettingCard title={"Theme colour"} id="themeColor" {...props}>
             <BaseControl
-                label={__('Colour', 'kudos-donations')}
                 help={__('Set the colour for the Kudos button and the pop-up modal.', 'kudos-donations')}
             >
                 <ColorPalette
-                    id="_kudos_theme_color"
+                    id="_kudos_color_primary"
                     colors={colors}
-                    value={props.settings._kudos_theme_color}
-                    onChange={(value) => props.handleInputChange('_kudos_theme_color', value)}
+                    value={props.settings._kudos_theme_colors.primary}
+                    onChange={(value) => props.handleInputChange('_kudos_theme_colors', {primary: value})}
                     disableCustomColors={true}
                     clearable={false}
                 />

src/js/kudos-button-block.jsx

@@ -140,7 +140,7 @@ export default registerBlockType('iseardmedia/kudos-button', {
                     >
                         <RichText
                             className={'kd-transition kd-duration-150 kd-ease-in-out focus:kd-shadow-focus focus:kd-outline-none kd-font-sans kd-text-center kd-text-white kd-leading-normal kd-text-base kd-font-normal kd-normal-case kd-no-underline kd-w-auto kd-h-auto kd-inline-flex kd-items-center kd-select-none kd-py-3 kd-px-5 kd-m-1 kd-rounded-lg kd-cursor-pointer kd-shadow-none kd-border-none kd-bg-primary hover:kd-bg-primary-dark kudos_button_donate'}
-                            style={{backgroundColor: kudos.theme_color}}
+                            style={{backgroundColor: kudos.color_primary}}
                             formattingControls={[
                                 'bold',
                                 'italic',