The theme palette goes before the default one

Author: oandregal

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -179,6 +179,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				colors: themeColors,
+			} );
+		}
 		if (
 			shouldDisplayDefaultColors &&
 			defaultColors &&
@@ -189,12 +195,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 				colors: defaultColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
-			} );
-		}
 		if ( customColors && customColors.length ) {
 			result.push( {
 				name: __( 'Custom' ),
@@ -212,6 +212,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				gradients: themeGradients,
+			} );
+		}
 		if (
 			shouldDisplayDefaultGradients &&
 			defaultGradients &&
@@ -222,12 +228,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 				gradients: defaultGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
-			} );
-		}
 		if ( customGradients && customGradients.length ) {
 			result.push( {
 				name: __( 'Custom' ),

packages/edit-site/src/components/global-styles/hooks.js

@@ -223,18 +223,18 @@ export function useColorsPerOrigin( name ) {
 	const [ defaultColors ] = useSetting( 'color.palette.core', name );
 	return useMemo( () => {
 		const result = [];
-		if ( defaultColors && defaultColors.length ) {
-			result.push( {
-				name: __( 'Default' ),
-				colors: defaultColors,
-			} );
-		}
 		if ( themeColors && themeColors.length ) {
 			result.push( {
 				name: __( 'Theme' ),
 				colors: themeColors,
 			} );
 		}
+		if ( defaultColors && defaultColors.length ) {
+			result.push( {
+				name: __( 'Default' ),
+				colors: defaultColors,
+			} );
+		}
 		if ( customColors && customColors.length ) {
 			result.push( {
 				name: __( 'Custom' ),
@@ -251,18 +251,18 @@ export function useGradientsPerOrigin( name ) {
 	const [ defaultGradients ] = useSetting( 'color.gradients.core', name );
 	return useMemo( () => {
 		const result = [];
-		if ( defaultGradients && defaultGradients.length ) {
-			result.push( {
-				name: __( 'Default' ),
-				gradients: defaultGradients,
-			} );
-		}
 		if ( themeGradients && themeGradients.length ) {
 			result.push( {
 				name: __( 'Theme' ),
 				gradients: themeGradients,
 			} );
 		}
+		if ( defaultGradients && defaultGradients.length ) {
+			result.push( {
+				name: __( 'Default' ),
+				gradients: defaultGradients,
+			} );
+		}
 		if ( customGradients && customGradients.length ) {
 			result.push( {
 				name: __( 'Custom' ),