Merge pull request #51700 from Geometror/fix-color-picker

Reimplement ColorPicker presets

5 files changed, 200 insertions, 98 deletions

diff --git a/doc/classes/ColorPicker.xml b/doc/classes/ColorPicker.xml
index 99e121de75..571ffd592a 100644
--- a/doc/classes/ColorPicker.xml
+++ b/doc/classes/ColorPicker.xml
@@ -116,7 +116,7 @@
 		</theme_item>
 		<theme_item name="picker_cursor" data_type="icon" type="Texture2D">
 		</theme_item>
-		<theme_item name="preset_bg" data_type="icon" type="Texture2D">
+		<theme_item name="sample_bg" data_type="icon" type="Texture2D">
 		</theme_item>
 		<theme_item name="screen_picker" data_type="icon" type="Texture2D">
 			The icon for the screen color picker button.
diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp
index 4496180ddd..8c348731d6 100644
--- a/editor/editor_themes.cpp
+++ b/editor/editor_themes.cpp
@@ -1361,7 +1361,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_constant("label_width", "ColorPicker", 10 * EDSCALE);
 	theme->set_icon("screen_picker", "ColorPicker", theme->get_icon("ColorPick", "EditorIcons"));
 	theme->set_icon("add_preset", "ColorPicker", theme->get_icon("Add", "EditorIcons"));
-	theme->set_icon("preset_bg", "ColorPicker", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
+	theme->set_icon("sample_bg", "ColorPicker", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
 	theme->set_icon("overbright_indicator", "ColorPicker", theme->get_icon("OverbrightIndicator", "EditorIcons"));
 	theme->set_icon("bar_arrow", "ColorPicker", theme->get_icon("ColorPickerBarArrow", "EditorIcons"));
 	theme->set_icon("picker_cursor", "ColorPicker", theme->get_icon("PickerCursor", "EditorIcons"));
@@ -1369,6 +1369,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	// ColorPickerButton
 	theme->set_icon("bg", "ColorPickerButton", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
 
+	// ColorPresetButton
+	Ref<StyleBoxFlat> preset_sb = make_flat_stylebox(Color(1, 1, 1), 2, 2, 2, 2, 2);
+	preset_sb->set_anti_aliased(false);
+	theme->set_stylebox("preset_fg", "ColorPresetButton", preset_sb);
+	theme->set_icon("preset_bg", "ColorPresetButton", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
+	theme->set_icon("overbright_indicator", "ColorPresetButton", theme->get_icon("OverbrightIndicator", "EditorIcons"));
+
 	// Information on 3D viewport
 	Ref<StyleBoxFlat> style_info_3d_viewport = style_default->duplicate();
 	style_info_3d_viewport->set_bg_color(style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5));
diff --git a/scene/gui/color_picker.cpp b/scene/gui/color_picker.cpp
index 261480bcdd..661e0dc648 100644
--- a/scene/gui/color_picker.cpp
+++ b/scene/gui/color_picker.cpp
@@ -46,13 +46,13 @@ void ColorPicker::_notification(int p_what) {
 	switch (p_what) {
 		case NOTIFICATION_THEME_CHANGED: {
 			btn_pick->set_icon(get_theme_icon(SNAME("screen_picker"), SNAME("ColorPicker")));
-			bt_add_preset->set_icon(get_theme_icon(SNAME("add_preset")));
-
+			btn_add_preset->set_icon(get_theme_icon(SNAME("add_preset")));
+			_update_presets();
 			_update_controls();
 		} break;
 		case NOTIFICATION_ENTER_TREE: {
 			btn_pick->set_icon(get_theme_icon(SNAME("screen_picker"), SNAME("ColorPicker")));
-			bt_add_preset->set_icon(get_theme_icon(SNAME("add_preset")));
+			btn_add_preset->set_icon(get_theme_icon(SNAME("add_preset")));
 
 			_update_controls();
 			_update_color();
@@ -69,7 +69,6 @@ void ColorPicker::_notification(int p_what) {
 				for (int i = 0; i < preset_cache.size(); i++) {
 					presets.push_back(preset_cache[i]);
 				}
-				preset->update();
 			}
 #endif
 		} break;
@@ -372,22 +371,23 @@ void ColorPicker::_update_color(bool p_update_sliders) {
 }
 
 void ColorPicker::_update_presets() {
-	return;
-	//presets should be shown using buttons or something else, this method is not a good idea
-
-	presets_per_row = 10;
-	Size2 size = bt_add_preset->get_size();
-	Size2 preset_size = Size2(MIN(size.width * presets.size(), presets_per_row * size.width), size.height * (Math::ceil((float)presets.size() / presets_per_row)));
-	preset->set_custom_minimum_size(preset_size);
-	preset_container->set_custom_minimum_size(preset_size);
-	preset->draw_rect(Rect2(Point2(), preset_size), Color(1, 1, 1, 0));
-
-	for (int i = 0; i < presets.size(); i++) {
-		int x = (i % presets_per_row) * size.width;
-		int y = (Math::floor((float)i / presets_per_row)) * size.height;
-		preset->draw_rect(Rect2(Point2(x, y), size), presets[i]);
+	int preset_size = _get_preset_size();
+	// Only update the preset button size if it has changed.
+	if (preset_size != prev_preset_size) {
+		prev_preset_size = preset_size;
+		btn_add_preset->set_custom_minimum_size(Size2(preset_size, preset_size));
+		for (int i = 1; i < preset_container->get_child_count(); i++) {
+			ColorPresetButton *cpb = Object::cast_to<ColorPresetButton>(preset_container->get_child(i));
+			cpb->set_custom_minimum_size(Size2(preset_size, preset_size));
+		}
+	}
+	// Only load preset buttons when the only child is the add-preset button.
+	if (preset_container->get_child_count() == 1) {
+		for (int i = 0; i < preset_cache.size(); i++) {
+			_add_preset_button(preset_size, preset_cache[i]);
+		}
+		_notification(NOTIFICATION_VISIBILITY_CHANGED);
 	}
-	_notification(NOTIFICATION_VISIBILITY_CHANGED);
 }
 
 void ColorPicker::_text_type_toggled() {
@@ -422,14 +422,37 @@ ColorPicker::PickerShapeType ColorPicker::get_picker_shape() const {
 	return picker_type;
 }
 
+inline int ColorPicker::_get_preset_size() {
+	return (int(get_minimum_size().width) - (preset_container->get_theme_constant(SNAME("hseparation")) * (preset_column_count - 1))) / preset_column_count;
+}
+
+void ColorPicker::_add_preset_button(int p_size, const Color &p_color) {
+	ColorPresetButton *btn_preset = memnew(ColorPresetButton(p_color));
+	btn_preset->set_preset_color(p_color);
+	btn_preset->set_custom_minimum_size(Size2(p_size, p_size));
+	btn_preset->connect("gui_input", callable_mp(this, &ColorPicker::_preset_input), varray(p_color));
+	btn_preset->set_tooltip(vformat(RTR("Color: #%s\nLMB: Apply color\nRMB: Remove preset"), p_color.to_html(p_color.a < 1)));
+	preset_container->add_child(btn_preset);
+}
+
 void ColorPicker::add_preset(const Color &p_color) {
 	if (presets.find(p_color)) {
 		presets.move_to_back(presets.find(p_color));
+
+		// Find button to move to the end.
+		for (int i = 1; i < preset_container->get_child_count(); i++) {
+			ColorPresetButton *current_btn = Object::cast_to<ColorPresetButton>(preset_container->get_child(i));
+			if (current_btn && p_color == current_btn->get_preset_color()) {
+				preset_container->move_child(current_btn, preset_container->get_child_count() - 1);
+				break;
+			}
+		}
 	} else {
 		presets.push_back(p_color);
 		preset_cache.push_back(p_color);
+
+		_add_preset_button(_get_preset_size(), p_color);
 	}
-	preset->update();
 
 #ifdef TOOLS_ENABLED
 	if (Engine::get_singleton()->is_editor_hint()) {
@@ -443,7 +466,15 @@ void ColorPicker::erase_preset(const Color &p_color) {
 	if (presets.find(p_color)) {
 		presets.erase(presets.find(p_color));
 		preset_cache.erase(preset_cache.find(p_color));
-		preset->update();
+
+		// Find preset button to remove.
+		for (int i = 1; i < preset_container->get_child_count(); i++) {
+			ColorPresetButton *current_btn = Object::cast_to<ColorPresetButton>(preset_container->get_child(i));
+			if (current_btn && p_color == current_btn->get_preset_color()) {
+				current_btn->queue_delete();
+				break;
+			}
+		}
 
 #ifdef TOOLS_ENABLED
 		if (Engine::get_singleton()->is_editor_hint()) {
@@ -560,7 +591,7 @@ void ColorPicker::_sample_draw() {
 		const Rect2 rect_old = Rect2(Point2(), Size2(sample->get_size().width * 0.5, sample->get_size().height * 0.95));
 
 		if (display_old_color && old_color.a < 1.0) {
-			sample->draw_texture_rect(get_theme_icon(SNAME("preset_bg"), SNAME("ColorPicker")), rect_old, true);
+			sample->draw_texture_rect(get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), rect_old, true);
 		}
 
 		sample->draw_rect(rect_old, old_color);
@@ -574,7 +605,7 @@ void ColorPicker::_sample_draw() {
 	}
 
 	if (color.a < 1.0) {
-		sample->draw_texture_rect(get_theme_icon(SNAME("preset_bg"), SNAME("ColorPicker")), rect_new, true);
+		sample->draw_texture_rect(get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), rect_new, true);
 	}
 
 	sample->draw_rect(rect_new, color);
@@ -734,7 +765,7 @@ void ColorPicker::_slider_draw(int p_which) {
 #endif
 
 	if (p_which == 3) {
-		scroll[p_which]->draw_texture_rect(get_theme_icon(SNAME("preset_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
+		scroll[p_which]->draw_texture_rect(get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
 
 		left_color = color;
 		left_color.a = 0;
@@ -932,43 +963,19 @@ void ColorPicker::_w_input(const Ref<InputEvent> &p_event) {
 	}
 }
 
-void ColorPicker::_preset_input(const Ref<InputEvent> &p_event) {
+void ColorPicker::_preset_input(const Ref<InputEvent> &p_event, const Color &p_color) {
 	Ref<InputEventMouseButton> bev = p_event;
 
 	if (bev.is_valid()) {
-		int index = 0;
 		if (bev->is_pressed() && bev->get_button_index() == MOUSE_BUTTON_LEFT) {
-			for (int i = 0; i < presets.size(); i++) {
-				int x = (i % presets_per_row) * bt_add_preset->get_size().x;
-				int y = (Math::floor((float)i / presets_per_row)) * bt_add_preset->get_size().y;
-				if (bev->get_position().x > x && bev->get_position().x < x + preset->get_size().x && bev->get_position().y > y && bev->get_position().y < y + preset->get_size().y) {
-					index = i;
-				}
-			}
-			set_pick_color(presets[index]);
+			set_pick_color(p_color);
 			_update_color();
-			emit_signal(SNAME("color_changed"), color);
+			emit_signal(SNAME("color_changed"), p_color);
 		} else if (bev->is_pressed() && bev->get_button_index() == MOUSE_BUTTON_RIGHT && presets_enabled) {
-			index = bev->get_position().x / (preset->get_size().x / presets.size());
-			Color clicked_preset = presets[index];
-			erase_preset(clicked_preset);
-			emit_signal(SNAME("preset_removed"), clicked_preset);
-			bt_add_preset->show();
+			erase_preset(p_color);
+			emit_signal(SNAME("preset_removed"), p_color);
 		}
 	}
-
-	Ref<InputEventMouseMotion> mev = p_event;
-
-	if (mev.is_valid()) {
-		int index = mev->get_position().x * presets.size();
-		if (preset->get_size().x != 0) {
-			index /= preset->get_size().x;
-		}
-		if (index < 0 || index >= presets.size()) {
-			return;
-		}
-		preset->set_tooltip(vformat(RTR("Color: #%s\nLMB: Set color\nRMB: Remove preset"), presets[index].to_html(presets[index].a < 1)));
-	}
 }
 
 void ColorPicker::_screen_input(const Ref<InputEvent> &p_event) {
@@ -1064,11 +1071,11 @@ void ColorPicker::_html_focus_exit() {
 void ColorPicker::set_presets_enabled(bool p_enabled) {
 	presets_enabled = p_enabled;
 	if (!p_enabled) {
-		bt_add_preset->set_disabled(true);
-		bt_add_preset->set_focus_mode(FOCUS_NONE);
+		btn_add_preset->set_disabled(true);
+		btn_add_preset->set_focus_mode(FOCUS_NONE);
 	} else {
-		bt_add_preset->set_disabled(false);
-		bt_add_preset->set_focus_mode(FOCUS_ALL);
+		btn_add_preset->set_disabled(false);
+		btn_add_preset->set_focus_mode(FOCUS_ALL);
 	}
 }
 
@@ -1080,7 +1087,6 @@ void ColorPicker::set_presets_visible(bool p_visible) {
 	presets_visible = p_visible;
 	preset_separator->set_visible(p_visible);
 	preset_container->set_visible(p_visible);
-	preset_container2->set_visible(p_visible);
 }
 
 bool ColorPicker::are_presets_visible() const {
@@ -1266,17 +1272,13 @@ ColorPicker::ColorPicker() :
 	add_child(preset_separator);
 
 	preset_container->set_h_size_flags(SIZE_EXPAND_FILL);
+	preset_container->set_columns(preset_column_count);
 	add_child(preset_container);
 
-	preset_container->add_child(preset);
-	preset->connect("gui_input", callable_mp(this, &ColorPicker::_preset_input));
-	preset->connect("draw", callable_mp(this, &ColorPicker::_update_presets));
-
-	preset_container2->set_h_size_flags(SIZE_EXPAND_FILL);
-	add_child(preset_container2);
-	preset_container2->add_child(bt_add_preset);
-	bt_add_preset->set_tooltip(RTR("Add current color as a preset."));
-	bt_add_preset->connect("pressed", callable_mp(this, &ColorPicker::_add_preset_pressed));
+	btn_add_preset->set_icon_align(Button::ALIGN_CENTER);
+	btn_add_preset->set_tooltip(RTR("Add current color as a preset."));
+	btn_add_preset->connect("pressed", callable_mp(this, &ColorPicker::_add_preset_pressed));
+	preset_container->add_child(btn_add_preset);
 }
 
 /////////////////
@@ -1303,6 +1305,7 @@ void ColorPickerButton::pressed() {
 	_update_picker();
 
 	popup->set_as_minsize();
+	picker->_update_presets();
 
 	Rect2i usable_rect = popup->get_usable_parent_rect();
 	//let's try different positions to see which one we can use
@@ -1428,3 +1431,64 @@ void ColorPickerButton::_bind_methods() {
 ColorPickerButton::ColorPickerButton() {
 	set_toggle_mode(true);
 }
+
+/////////////////
+
+void ColorPresetButton::_notification(int p_what) {
+	switch (p_what) {
+		case NOTIFICATION_DRAW: {
+			const Rect2 r = Rect2(Point2(0, 0), get_size());
+			Ref<StyleBox> sb_raw = get_theme_stylebox(SNAME("preset_fg"), SNAME("ColorPresetButton"))->duplicate();
+			Ref<StyleBoxFlat> sb_flat = sb_raw;
+			Ref<StyleBoxTexture> sb_texture = sb_raw;
+
+			if (sb_flat.is_valid()) {
+				if (preset_color.a < 1) {
+					// Draw a background pattern when the color is transparent.
+					sb_flat->set_bg_color(Color(1, 1, 1));
+					sb_flat->draw(get_canvas_item(), r);
+
+					Rect2 bg_texture_rect = r.grow_side(SIDE_LEFT, -sb_flat->get_margin(SIDE_LEFT));
+					bg_texture_rect = bg_texture_rect.grow_side(SIDE_RIGHT, -sb_flat->get_margin(SIDE_RIGHT));
+					bg_texture_rect = bg_texture_rect.grow_side(SIDE_TOP, -sb_flat->get_margin(SIDE_TOP));
+					bg_texture_rect = bg_texture_rect.grow_side(SIDE_BOTTOM, -sb_flat->get_margin(SIDE_BOTTOM));
+
+					draw_texture_rect(get_theme_icon(SNAME("preset_bg"), SNAME("ColorPresetButton")), bg_texture_rect, true);
+					sb_flat->set_bg_color(preset_color);
+				}
+				sb_flat->set_bg_color(preset_color);
+				sb_flat->draw(get_canvas_item(), r);
+			} else if (sb_texture.is_valid()) {
+				if (preset_color.a < 1) {
+					// Draw a background pattern when the color is transparent.
+					bool use_tile_texture = (sb_texture->get_h_axis_stretch_mode() == StyleBoxTexture::AxisStretchMode::AXIS_STRETCH_MODE_TILE) || (sb_texture->get_h_axis_stretch_mode() == StyleBoxTexture::AxisStretchMode::AXIS_STRETCH_MODE_TILE_FIT);
+					draw_texture_rect(get_theme_icon(SNAME("preset_bg"), SNAME("ColorPresetButton")), r, use_tile_texture);
+				}
+				sb_texture->set_modulate(preset_color);
+				sb_texture->draw(get_canvas_item(), r);
+			} else {
+				WARN_PRINT("Unsupported StyleBox used for ColorPresetButton. Use StyleBoxFlat or StyleBoxTexture instead.");
+			}
+			if (preset_color.r > 1 || preset_color.g > 1 || preset_color.b > 1) {
+				// Draw an indicator to denote that the color is "overbright" and can't be displayed accurately in the preview
+				draw_texture(Control::get_theme_icon(SNAME("overbright_indicator"), SNAME("ColorPresetButton")), Vector2(0, 0));
+			}
+
+		} break;
+	}
+}
+
+void ColorPresetButton::set_preset_color(const Color &p_color) {
+	preset_color = p_color;
+}
+
+Color ColorPresetButton::get_preset_color() const {
+	return preset_color;
+}
+
+ColorPresetButton::ColorPresetButton(Color p_color) {
+	preset_color = p_color;
+}
+
+ColorPresetButton::~ColorPresetButton() {
+}
diff --git a/scene/gui/color_picker.h b/scene/gui/color_picker.h
index 60da3957aa..67ca007eb5 100644
--- a/scene/gui/color_picker.h
+++ b/scene/gui/color_picker.h
@@ -35,6 +35,7 @@
 #include "scene/gui/box_container.h"
 #include "scene/gui/button.h"
 #include "scene/gui/check_button.h"
+#include "scene/gui/grid_container.h"
 #include "scene/gui/label.h"
 #include "scene/gui/line_edit.h"
 #include "scene/gui/popup.h"
@@ -43,6 +44,22 @@
 #include "scene/gui/spin_box.h"
 #include "scene/gui/texture_rect.h"
 
+class ColorPresetButton : public BaseButton {
+	GDCLASS(ColorPresetButton, BaseButton);
+
+	Color preset_color;
+
+protected:
+	void _notification(int);
+
+public:
+	void set_preset_color(const Color &p_color);
+	Color get_preset_color() const;
+
+	ColorPresetButton(Color p_color);
+	~ColorPresetButton();
+};
+
 class ColorPicker : public BoxContainer {
 	GDCLASS(ColorPicker, BoxContainer);
 
@@ -69,12 +86,9 @@ private:
 	Control *wheel = memnew(Control);
 	Control *wheel_uv = memnew(Control);
 	TextureRect *sample = memnew(TextureRect);
-	TextureRect *preset = memnew(TextureRect);
-	HBoxContainer *preset_container = memnew(HBoxContainer);
-	HBoxContainer *preset_container2 = memnew(HBoxContainer);
+	GridContainer *preset_container = memnew(GridContainer);
 	HSeparator *preset_separator = memnew(HSeparator);
-	Button *bt_add_preset = memnew(Button);
-	List<Color> presets;
+	Button *btn_add_preset = memnew(Button);
 	Button *btn_pick = memnew(Button);
 	CheckButton *btn_hsv = memnew(CheckButton);
 	CheckButton *btn_raw = memnew(CheckButton);
@@ -83,14 +97,19 @@ private:
 	Label *labels[4];
 	Button *text_type = memnew(Button);
 	LineEdit *c_text = memnew(LineEdit);
+
 	bool edit_alpha = true;
 	Size2i ms;
 	bool text_is_constructor = false;
-	int presets_per_row = 0;
 	PickerShapeType picker_type = SHAPE_HSV_WHEEL;
 
+	const int preset_column_count = 9;
+	int prev_preset_size = 0;
+	List<Color> presets;
+
 	Color color;
 	Color old_color;
+
 	bool display_old_color = false;
 	bool raw_mode_enabled = false;
 	bool hsv_mode_enabled = false;
@@ -100,6 +119,7 @@ private:
 	bool spinning = false;
 	bool presets_enabled = true;
 	bool presets_visible = true;
+
 	float h = 0.0;
 	float s = 0.0;
 	float v = 0.0;
@@ -109,7 +129,6 @@ private:
 	void _value_changed(double);
 	void _update_controls();
 	void _update_color(bool p_update_sliders = true);
-	void _update_presets();
 	void _update_text_value();
 	void _text_type_toggled();
 	void _sample_input(const Ref<InputEvent> &p_event);
@@ -119,7 +138,7 @@ private:
 
 	void _uv_input(const Ref<InputEvent> &p_event, Control *c);
 	void _w_input(const Ref<InputEvent> &p_event);
-	void _preset_input(const Ref<InputEvent> &p_event);
+	void _preset_input(const Ref<InputEvent> &p_event, const Color &p_color);
 	void _screen_input(const Ref<InputEvent> &p_event);
 	void _add_preset_pressed();
 	void _screen_pick_pressed();
@@ -127,6 +146,9 @@ private:
 	void _focus_exit();
 	void _html_focus_exit();
 
+	inline int _get_preset_size();
+	void _add_preset_button(int p_size, const Color &p_color);
+
 protected:
 	void _notification(int);
 	static void _bind_methods();
@@ -152,6 +174,7 @@ public:
 	void add_preset(const Color &p_color);
 	void erase_preset(const Color &p_color);
 	PackedColorArray get_presets() const;
+	void _update_presets();
 
 	void set_hsv_mode(bool p_enabled);
 	bool is_hsv_mode() const;
diff --git a/scene/resources/default_theme/default_theme.cpp b/scene/resources/default_theme/default_theme.cpp
index 4e139adabb..dd7b348498 100644
--- a/scene/resources/default_theme/default_theme.cpp
+++ b/scene/resources/default_theme/default_theme.cpp
@@ -212,26 +212,6 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_constant("outline_size", "LinkButton", 0);
 	theme->set_constant("underline_spacing", "LinkButton", 2 * scale);
 
-	// ColorPickerButton
-
-	theme->set_stylebox("normal", "ColorPickerButton", sb_button_normal);
-	theme->set_stylebox("pressed", "ColorPickerButton", sb_button_pressed);
-	theme->set_stylebox("hover", "ColorPickerButton", sb_button_hover);
-	theme->set_stylebox("disabled", "ColorPickerButton", sb_button_disabled);
-	theme->set_stylebox("focus", "ColorPickerButton", sb_button_focus);
-
-	theme->set_font("font", "ColorPickerButton", Ref<Font>());
-	theme->set_font_size("font_size", "ColorPickerButton", -1);
-
-	theme->set_color("font_color", "ColorPickerButton", Color(1, 1, 1, 1));
-	theme->set_color("font_pressed_color", "ColorPickerButton", Color(0.8, 0.8, 0.8, 1));
-	theme->set_color("font_hover_color", "ColorPickerButton", Color(1, 1, 1, 1));
-	theme->set_color("font_disabled_color", "ColorPickerButton", Color(0.9, 0.9, 0.9, 0.3));
-	theme->set_color("font_outline_color", "ColorPickerButton", Color(1, 1, 1));
-
-	theme->set_constant("hseparation", "ColorPickerButton", 2 * scale);
-	theme->set_constant("outline_size", "ColorPickerButton", 0);
-
 	// OptionButton
 
 	Ref<StyleBox> sb_optbutton_focus = sb_expand(make_stylebox(button_focus_png, 4, 4, 4, 4, 6, 2, 6, 2), 2, 2, 2, 2);
@@ -859,7 +839,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_icon("add_preset", "ColorPicker", make_icon(icon_add_png));
 	theme->set_icon("color_hue", "ColorPicker", make_icon(color_picker_hue_png));
 	theme->set_icon("color_sample", "ColorPicker", make_icon(color_picker_sample_png));
-	theme->set_icon("preset_bg", "ColorPicker", make_icon(mini_checkerboard_png));
+	theme->set_icon("sample_bg", "ColorPicker", make_icon(mini_checkerboard_png));
 	theme->set_icon("overbright_indicator", "ColorPicker", make_icon(overbright_indicator_png));
 	theme->set_icon("bar_arrow", "ColorPicker", make_icon(bar_arrow_png));
 	theme->set_icon("picker_cursor", "ColorPicker", make_icon(picker_cursor_png));
@@ -867,6 +847,34 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	// ColorPickerButton
 
 	theme->set_icon("bg", "ColorPickerButton", make_icon(mini_checkerboard_png));
+	theme->set_stylebox("normal", "ColorPickerButton", sb_button_normal);
+	theme->set_stylebox("pressed", "ColorPickerButton", sb_button_pressed);
+	theme->set_stylebox("hover", "ColorPickerButton", sb_button_hover);
+	theme->set_stylebox("disabled", "ColorPickerButton", sb_button_disabled);
+	theme->set_stylebox("focus", "ColorPickerButton", sb_button_focus);
+
+	theme->set_font("font", "ColorPickerButton", Ref<Font>());
+	theme->set_font_size("font_size", "ColorPickerButton", -1);
+
+	theme->set_color("font_color", "ColorPickerButton", Color(1, 1, 1, 1));
+	theme->set_color("font_pressed_color", "ColorPickerButton", Color(0.8, 0.8, 0.8, 1));
+	theme->set_color("font_hover_color", "ColorPickerButton", Color(1, 1, 1, 1));
+	theme->set_color("font_disabled_color", "ColorPickerButton", Color(0.9, 0.9, 0.9, 0.3));
+	theme->set_color("font_outline_color", "ColorPickerButton", Color(1, 1, 1));
+
+	theme->set_constant("hseparation", "ColorPickerButton", 2 * scale);
+	theme->set_constant("outline_size", "ColorPickerButton", 0);
+
+	// ColorPresetButton
+
+	Ref<StyleBoxFlat> preset_sb = make_flat_stylebox(Color(1, 1, 1), 2, 2, 2, 2);
+	preset_sb->set_corner_radius_all(2);
+	preset_sb->set_corner_detail(2);
+	preset_sb->set_anti_aliased(false);
+
+	theme->set_stylebox("preset_fg", "ColorPresetButton", preset_sb);
+	theme->set_icon("preset_bg", "ColorPresetButton", make_icon(mini_checkerboard_png));
+	theme->set_icon("overbright_indicator", "ColorPresetButton", make_icon(overbright_indicator_png));
 
 	// TooltipPanel