Redesign ColorInput widget and rename it to ColorButton

editor/src/messages/layout/layout_message_handler.rs

@@ -96,8 +96,8 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 						let callback_message = (checkbox_input.on_update.callback)(checkbox_input);
 						responses.add(callback_message);
 					}
-					Widget::ColorInput(color_input) => {
-						let update_value = value.as_object().expect("ColorInput update was not of type: object");
+					Widget::ColorButton(color_button) => {
+						let update_value = value.as_object().expect("ColorButton update was not of type: object");
 						let parsed_color = (|| {
 							let is_none = update_value.get("none")?.as_bool()?;
 
@@ -112,9 +112,9 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 								Some(None)
 							}
 						})()
-						.unwrap_or_else(|| panic!("ColorInput update was not able to be parsed with color data: {color_input:?}"));
-						color_input.value = parsed_color;
-						let callback_message = (color_input.on_update.callback)(color_input);
+						.unwrap_or_else(|| panic!("ColorButton update was not able to be parsed with color data: {color_button:?}"));
+						color_button.value = parsed_color;
+						let callback_message = (color_button.on_update.callback)(color_button);
 						responses.add(callback_message);
 					}
 					Widget::CurveInput(curve_input) => {

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -320,7 +320,7 @@ impl LayoutGroup {
 		for widget in &mut widgets {
 			let val = match &mut widget.widget {
 				Widget::CheckboxInput(x) => &mut x.tooltip,
-				Widget::ColorInput(x) => &mut x.tooltip,
+				Widget::ColorButton(x) => &mut x.tooltip,
 				Widget::CurveInput(x) => &mut x.tooltip,
 				Widget::DropdownInput(x) => &mut x.tooltip,
 				Widget::FontInput(x) => &mut x.tooltip,
@@ -471,7 +471,7 @@ impl<T> Default for WidgetCallback<T> {
 pub enum Widget {
 	BreadcrumbTrailButtons(BreadcrumbTrailButtons),
 	CheckboxInput(CheckboxInput),
-	ColorInput(ColorInput),
+	ColorButton(ColorButton),
 	CurveInput(CurveInput),
 	DropdownInput(DropdownInput),
 	FontInput(FontInput),
@@ -545,7 +545,7 @@ impl DiffUpdate {
 			let mut tooltip_shortcut = match &mut widget_holder.widget {
 				Widget::BreadcrumbTrailButtons(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::CheckboxInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
-				Widget::ColorInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
+				Widget::ColorButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::DropdownInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::FontInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 				Widget::IconButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -2,6 +2,7 @@ use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::FrontendGraphDataType;
 
+use graphene_core::raster::color::Color;
 use graphite_proc_macros::WidgetBuilder;
 
 use derivative::*;
@@ -105,6 +106,32 @@ pub struct TextButton {
 	pub on_update: WidgetCallback<TextButton>,
 }
 
+#[derive(Clone, Derivative, Serialize, Deserialize, WidgetBuilder, specta::Type)]
+#[derivative(Debug, PartialEq, Default)]
+pub struct ColorButton {
+	#[widget_builder(constructor)]
+	pub value: Option<Color>,
+
+	// TODO: Implement
+	// #[serde(rename = "allowTransparency")]
+	// #[derivative(Default(value = "false"))]
+	// pub allow_transparency: bool,
+	#[serde(rename = "allowNone")]
+	#[derivative(Default(value = "true"))]
+	pub allow_none: bool,
+
+	// pub disabled: bool,
+	pub tooltip: String,
+
+	#[serde(skip)]
+	pub tooltip_shortcut: Option<ActionKeys>,
+
+	// Callbacks
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<ColorButton>,
+}
+
 #[derive(Clone, Serialize, Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 #[serde(rename_all = "camelCase")]

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -44,32 +44,6 @@ impl Default for CheckboxInput {
 	}
 }
 
-#[derive(Clone, Derivative, Serialize, Deserialize, WidgetBuilder, specta::Type)]
-#[derivative(Debug, PartialEq, Default)]
-pub struct ColorInput {
-	#[widget_builder(constructor)]
-	pub value: Option<Color>,
-
-	// TODO: Implement
-	// #[serde(rename = "allowTransparency")]
-	// #[derivative(Default(value = "false"))]
-	// pub allow_transparency: bool,
-	#[serde(rename = "allowNone")]
-	#[derivative(Default(value = "true"))]
-	pub allow_none: bool,
-
-	// pub disabled: bool,
-	pub tooltip: String,
-
-	#[serde(skip)]
-	pub tooltip_shortcut: Option<ActionKeys>,
-
-	// Callbacks
-	#[serde(skip)]
-	#[derivative(Debug = "ignore", PartialEq = "ignore")]
-	pub on_update: WidgetCallback<ColorInput>,
-}
-
 #[derive(Clone, Serialize, Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct DropdownInput {

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -507,13 +507,13 @@ fn gradient_row(row: &mut Vec<WidgetHolder>, positions: &Vec<(f64, Option<Color>
 	row.push(label.widget_holder());
 	let on_update = {
 		let positions = positions.clone();
-		move |color_input: &ColorInput| {
+		move |color_button: &ColorButton| {
 			let mut new_positions = positions.clone();
-			new_positions[index].1 = color_input.value;
+			new_positions[index].1 = color_button.value;
 			TaggedValue::GradientPositions(new_positions)
 		}
 	};
-	let color = ColorInput::new(positions[index].1).on_update(update_value(on_update, node_id, input_index));
+	let color = ColorButton::new(positions[index].1).on_update(update_value(on_update, node_id, input_index));
 	add_blank_assist(row);
 	row.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 	row.push(color.widget_holder());
@@ -617,7 +617,7 @@ fn gradient_positions(rows: &mut Vec<LayoutGroup>, document_node: &DocumentNode,
 	}
 }
 
-fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: &str, color_props: ColorInput, blank_assist: bool) -> LayoutGroup {
+fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name: &str, color_props: ColorButton, blank_assist: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::Number, blank_assist);
 
 	if let NodeInput::Value { tagged_value, exposed: false } = &document_node.inputs[index] {
@@ -626,7 +626,7 @@ fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name:
 				Separator::new(SeparatorType::Unrelated).widget_holder(),
 				color_props
 					.value(Some(x as Color))
-					.on_update(update_value(|x: &ColorInput| TaggedValue::Color(x.value.unwrap()), node_id, index))
+					.on_update(update_value(|x: &ColorButton| TaggedValue::Color(x.value.unwrap()), node_id, index))
 					.widget_holder(),
 			])
 		} else if let &TaggedValue::OptionalColor(x) = tagged_value {
@@ -634,7 +634,7 @@ fn color_widget(document_node: &DocumentNode, node_id: u64, index: usize, name:
 				Separator::new(SeparatorType::Unrelated).widget_holder(),
 				color_props
 					.value(x)
-					.on_update(update_value(|x: &ColorInput| TaggedValue::OptionalColor(x.value), node_id, index))
+					.on_update(update_value(|x: &ColorButton| TaggedValue::OptionalColor(x.value), node_id, index))
 					.widget_holder(),
 			])
 		}
@@ -691,7 +691,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId,
 	const MIN: f64 = -200.;
 	const MAX: f64 = 300.;
 	// TODO: Add tint color (blended above using the "Color" blend mode)
-	let tint = color_widget(document_node, node_id, 1, "Tint", ColorInput::default(), true);
+	let tint = color_widget(document_node, node_id, 1, "Tint", ColorButton::default(), true);
 	let r_weight = number_widget(document_node, node_id, 2, "Reds", NumberInput::default().min(MIN).max(MAX).unit("%"), true);
 	let y_weight = number_widget(document_node, node_id, 3, "Yellows", NumberInput::default().min(MIN).max(MAX).unit("%"), true);
 	let g_weight = number_widget(document_node, node_id, 4, "Greens", NumberInput::default().min(MIN).max(MAX).unit("%"), true);
@@ -711,7 +711,7 @@ pub fn black_and_white_properties(document_node: &DocumentNode, node_id: NodeId,
 }
 
 pub fn blend_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
-	let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorInput::default(), true);
+	let backdrop = color_widget(document_node, node_id, 1, "Backdrop", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
 	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().min(0.).max(100.).unit("%"), true);
 
@@ -731,7 +731,7 @@ pub fn boolean_properties(document_node: &DocumentNode, node_id: NodeId, _contex
 }
 
 pub fn color_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
-	vec![color_widget(document_node, node_id, 0, "Color", ColorInput::default(), true)]
+	vec![color_widget(document_node, node_id, 0, "Color", ColorButton::default(), true)]
 }
 
 pub fn load_image_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
@@ -772,7 +772,7 @@ pub fn output_properties(_document_node: &DocumentNode, _node_id: NodeId, contex
 }
 
 pub fn mask_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
-	let mask = color_widget(document_node, node_id, 1, "Stencil", ColorInput::default(), true);
+	let mask = color_widget(document_node, node_id, 1, "Stencil", ColorButton::default(), true);
 
 	vec![mask]
 }
@@ -1797,7 +1797,7 @@ pub fn stroke_properties(document_node: &DocumentNode, node_id: NodeId, _context
 	let line_join_index = 6;
 	let miter_limit_index = 7;
 
-	let color = color_widget(document_node, node_id, color_index, "Color", ColorInput::default(), true);
+	let color = color_widget(document_node, node_id, color_index, "Color", ColorButton::default(), true);
 	let weight = number_widget(document_node, node_id, weight_index, "Weight", NumberInput::default().unit("px").min(0.), true);
 	let dash_lengths = vec_f32_input(document_node, node_id, dash_lengths_index, "Dash Lengths", TextInput::default().centered(true), true);
 	let dash_offset = number_widget(document_node, node_id, dash_offset_index, "Dash Offset", NumberInput::default().unit("px").min(0.), true);
@@ -1862,7 +1862,7 @@ pub fn fill_properties(document_node: &DocumentNode, node_id: NodeId, _context:
 	widgets.push(fill_type_switch);
 
 	if fill_type.is_none() || solid {
-		let solid_color = color_widget(document_node, node_id, solid_color_index, "Color", ColorInput::default(), true);
+		let solid_color = color_widget(document_node, node_id, solid_color_index, "Color", ColorButton::default(), true);
 		widgets.push(solid_color);
 	}
 
@@ -1895,7 +1895,7 @@ pub fn layer_properties(document_node: &DocumentNode, node_id: NodeId, _context:
 pub fn artboard_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let location = vec2_widget(document_node, node_id, 1, "Location", "X", "Y", " px", add_blank_assist);
 	let dimensions = vec2_widget(document_node, node_id, 2, "Dimensions", "W", "H", " px", add_blank_assist);
-	let background = color_widget(document_node, node_id, 3, "Background", ColorInput::default().allow_none(false), true);
+	let background = color_widget(document_node, node_id, 3, "Background", ColorButton::default().allow_none(false), true);
 	let clip = LayoutGroup::Row {
 		widgets: bool_widget(document_node, node_id, 4, "Clip", true),
 	};
@@ -1903,12 +1903,12 @@ pub fn artboard_properties(document_node: &DocumentNode, node_id: NodeId, _conte
 }
 
 pub fn color_fill_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
-	let color = color_widget(document_node, node_id, 1, "Color", ColorInput::default(), true);
+	let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true);
 	vec![color]
 }
 
 pub fn color_overlay_properties(document_node: &DocumentNode, node_id: NodeId, _context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
-	let color = color_widget(document_node, node_id, 1, "Color", ColorInput::default(), true);
+	let color = color_widget(document_node, node_id, 1, "Color", ColorButton::default(), true);
 	let blend_mode = blend_mode(document_node, node_id, 2, "Blend Mode", true);
 	let opacity = number_widget(document_node, node_id, 3, "Opacity", NumberInput::default().percentage(), true);
 

editor/src/messages/portfolio/document/properties_panel/utility_functions.rs

@@ -361,8 +361,8 @@ fn node_gradient_color(gradient: &Gradient, position: usize) -> LayoutGroup {
 		Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area.
 		Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
 		Separator::new(SeparatorType::Unrelated).widget_holder(),
-		ColorInput::new(gradient_clone.positions[position].1)
-			.on_update(move |text_input: &ColorInput| {
+		ColorButton::new(gradient_clone.positions[position].1)
+			.on_update(move |text_input: &ColorButton| {
 				let mut new_gradient = (*gradient_clone).clone();
 				new_gradient.positions[position].1 = text_input.value;
 				send_fill_message(new_gradient)
@@ -425,8 +425,8 @@ fn node_section_fill(fill: &Fill) -> Option<LayoutGroup> {
 						Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area.
 						Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
 						Separator::new(SeparatorType::Unrelated).widget_holder(),
-						ColorInput::new(if let Fill::Solid(color) = fill { Some(*color) } else { None })
-							.on_update(|text_input: &ColorInput| {
+						ColorButton::new(if let Fill::Solid(color) = fill { Some(*color) } else { None })
+							.on_update(|text_input: &ColorButton| {
 								let fill = if let Some(value) = text_input.value { Fill::Solid(value) } else { Fill::None };
 								PropertiesPanelMessage::ModifyFill { fill }.into()
 							})
@@ -543,8 +543,8 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutGroup {
 					Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: which is the width of the Assist area.
 					Separator::new(SeparatorType::Unrelated).widget_holder(), // TODO: Remove these when we have proper entry row formatting that includes room for Assists.
 					Separator::new(SeparatorType::Unrelated).widget_holder(),
-					ColorInput::new(stroke.color())
-						.on_update(move |text_input: &ColorInput| {
+					ColorButton::new(stroke.color())
+						.on_update(move |text_input: &ColorButton| {
 							internal_stroke1
 								.clone()
 								.with_color(&text_input.value)

editor/src/messages/tool/common_functionality/color_selector.rs

@@ -65,7 +65,7 @@ impl ToolColorOptions {
 		color_allow_none: bool,
 		reset_callback: impl Fn(&IconButton) -> Message + 'static + Send + Sync,
 		radio_callback: fn(ToolColorType) -> WidgetCallback<()>,
-		color_callback: impl Fn(&ColorInput) -> Message + 'static + Send + Sync,
+		color_callback: impl Fn(&ColorButton) -> Message + 'static + Send + Sync,
 	) -> Vec<WidgetHolder> {
 		let mut widgets = vec![TextLabel::new(label_text).widget_holder()];
 
@@ -98,8 +98,8 @@ impl ToolColorOptions {
 		widgets.push(radio);
 		widgets.push(Separator::new(SeparatorType::Related).widget_holder());
 
-		let color_input = ColorInput::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback);
-		widgets.push(color_input.widget_holder());
+		let color_button = ColorButton::new(self.active_color()).allow_none(color_allow_none).on_update(color_callback);
+		widgets.push(color_button.widget_holder());
 
 		widgets
 	}

editor/src/messages/tool/tool_messages/brush_tool.rs

@@ -187,7 +187,7 @@ impl LayoutHolder for BrushTool {
 			false,
 			|_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::ColorType(color_type.clone())).into()),
-			|color: &ColorInput| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(color.value)).into(),
+			|color: &ColorButton| BrushToolMessage::UpdateOptions(BrushToolMessageOptionsUpdate::Color(color.value)).into(),
 		));
 
 		widgets.push(Separator::new(SeparatorType::Related).widget_holder());

editor/src/messages/tool/tool_messages/ellipse_tool.rs

@@ -91,7 +91,7 @@ impl LayoutHolder for EllipseTool {
 			true,
 			|_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::FillColor(color.value)).into(),
 		);
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -101,7 +101,7 @@ impl LayoutHolder for EllipseTool {
 			true,
 			|_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/freehand_tool.rs

@@ -98,7 +98,7 @@ impl LayoutHolder for FreehandTool {
 			true,
 			|_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::FillColor(color.value)).into(),
 		);
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -108,7 +108,7 @@ impl LayoutHolder for FreehandTool {
 			true,
 			|_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/line_tool.rs

@@ -92,7 +92,7 @@ impl LayoutHolder for LineTool {
 			true,
 			|_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| LineToolMessage::UpdateOptions(LineOptionsUpdate::StrokeColor(color.value)).into(),
 		);
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/pen_tool.rs

@@ -113,7 +113,7 @@ impl LayoutHolder for PenTool {
 			true,
 			|_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| PenToolMessage::UpdateOptions(PenOptionsUpdate::FillColor(color.value)).into(),
 		);
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -123,7 +123,7 @@ impl LayoutHolder for PenTool {
 			true,
 			|_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| PenToolMessage::UpdateOptions(PenOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/polygon_tool.rs

@@ -130,7 +130,7 @@ impl LayoutHolder for PolygonTool {
 			true,
 			|_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::FillColor(color.value)).into(),
 		));
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -140,7 +140,7 @@ impl LayoutHolder for PolygonTool {
 			true,
 			|_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/rectangle_tool.rs

@@ -79,7 +79,7 @@ impl LayoutHolder for RectangleTool {
 			true,
 			|_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::FillColor(color.value)).into(),
 		);
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -89,7 +89,7 @@ impl LayoutHolder for RectangleTool {
 			true,
 			|_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/spline_tool.rs

@@ -100,7 +100,7 @@ impl LayoutHolder for SplineTool {
 			true,
 			|_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::FillColor(color.value)).into(),
 		);
 
 		widgets.push(Separator::new(SeparatorType::Section).widget_holder());
@@ -110,7 +110,7 @@ impl LayoutHolder for SplineTool {
 			true,
 			|_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColorType(color_type.clone())).into()),
-			|color: &ColorInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(color.value)).into(),
+			|color: &ColorButton| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::StrokeColor(color.value)).into(),
 		));
 		widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 		widgets.push(create_weight_widget(self.options.line_weight));

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -135,7 +135,7 @@ impl LayoutHolder for TextTool {
 			true,
 			|_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(None)).into(),
 			|color_type: ToolColorType| WidgetCallback::new(move |_| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColorType(color_type.clone())).into()),
-			|color: &ColorInput| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(color.value)).into(),
+			|color: &ColorButton| TextToolMessage::UpdateOptions(TextOptionsUpdate::FillColor(color.value)).into(),
 		));
 
 		Layout::WidgetLayout(WidgetLayout::new(vec![LayoutGroup::Row { widgets }]))