Redesign ColorInput widget and rename it to ColorButton

2026-09-15 22:28:10 +08:00 · 2023-11-16 18:38:39 -08:00
parent 8a816cd701
commit e3f5e7001f
22 changed files with 142 additions and 140 deletions
--- a/editor/src/messages/layout/layout_message_handler.rs
+++ b/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) => {
--- a/editor/src/messages/layout/utility_types/layout_widget.rs
+++ b/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)),
--- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
+++ b/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")]
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/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 {
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
+++ b/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);

--- a/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs
+++ b/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)
--- a/editor/src/messages/tool/common_functionality/color_selector.rs
+++ b/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
 	}
--- a/editor/src/messages/tool/tool_messages/brush_tool.rs
+++ b/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());
--- a/editor/src/messages/tool/tool_messages/ellipse_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/freehand_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/line_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/pen_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/polygon_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/rectangle_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/spline_tool.rs
+++ b/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));
--- a/editor/src/messages/tool/tool_messages/text_tool.rs
+++ b/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 }]))
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -125,29 +125,34 @@
 		--color-none-position: center center;
 		// 24px tall, 48px wide
 		--color-none-size-24px: 60px 24px;
-		--color-none-image-24px:
-			// Red diagonal slash (24px tall)
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>');
+		// Red diagonal slash (24px tall)
+		--color-none-image-24px: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24"><line stroke="red" stroke-width="4px" x1="0" y1="27" x2="60" y2="-3" /></svg>\
+			');
 		// 32px tall, 64px wide
 		--color-none-size-32px: 80px 32px;
-		--color-none-image-32px:
-			// Red diagonal slash (32px tall)
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>');
+		// Red diagonal slash (32px tall)
+		--color-none-image-32px: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>\
+			');

 		--color-transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
 			linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
 		--color-transparent-checkered-background-size: 16px 16px;
 		--color-transparent-checkered-background-position: 0 0, 8px 8px;

-		--icon-expand-collapse-arrow:
-			// Arrow triangle (#eee fill)
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
-		--icon-expand-collapse-arrow-hover:
-			// Arrow triangle (#fff fill)
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
-		--icon-expand-collapse-arrow-disabled:
-			// Arrow triangle (#888 fill)
-			url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>');
+		// Arrow triangle (#eee fill)
+		--icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
+			');
+		// Arrow triangle (#fff fill)
+		--icon-expand-collapse-arrow-hover: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23fff" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
+			');
+		// Arrow triangle (#888 fill)
+		--icon-expand-collapse-arrow-disabled: url('data:image/svg+xml;utf8,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23888" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\
+			');
 	}

 	html,
@@ -265,7 +270,7 @@
 	.icon-button,
 	.text-button,
 	.popover-button,
-	.color-input > button,
+	.color-button > button,
 	.color-picker .preset-color,
 	.swatch-pair .swatch > button,
 	.radio-input button,
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -384,20 +384,20 @@
 			<LayoutRow class="leftover-space" />
 			<LayoutRow>
 				{#if allowNone}
-					<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set none" tabindex="0" />
+					<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set No Color" tabindex="0" />
 					<Separator type="Related" />
 				{/if}
-				<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set black" tabindex="0" />
+				<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set Black" tabindex="0" />
 				<Separator type="Related" />
-				<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set white" tabindex="0" />
+				<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set White" tabindex="0" />
 				<Separator type="Related" />
 				<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
-					<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red" />
-					<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow" />
-					<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green" />
-					<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set cyan" />
-					<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set blue" />
-					<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set magenta" />
+					<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set Red" />
+					<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set Yellow" />
+					<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set Green" />
+					<div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" title="Set Cyan" />
+					<div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" title="Set Blue" />
+					<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set Magenta" />
 				</button>
 				<Separator type="Related" />
 				<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
--- a/frontend/src/components/widgets/WidgetRow.svelte
+++ b/frontend/src/components/widgets/WidgetRow.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { getContext } from "svelte";

+	import ColorButton from "./buttons/ColorButton.svelte";
+
 	import { debouncer } from "@graphite/utility-functions/debounce";
 	import type { Editor } from "@graphite/wasm-communication/editor";
 	import type { Widget, WidgetColumn, WidgetRow } from "@graphite/wasm-communication/messages";
@@ -13,7 +15,6 @@
 	import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
-	import ColorInput from "@graphite/components/widgets/inputs/ColorInput.svelte";
 	import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte";
 	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
 	import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
@@ -88,9 +89,9 @@
 		{#if checkboxInput}
 			<CheckboxInput {...exclude(checkboxInput)} on:checked={({ detail }) => updateLayout(index, detail)} />
 		{/if}
-		{@const colorInput = narrowWidgetProps(component.props, "ColorInput")}
+		{@const colorInput = narrowWidgetProps(component.props, "ColorButton")}
 		{#if colorInput}
-			<ColorInput {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
+			<ColorButton {...exclude(colorInput)} on:value={({ detail }) => updateLayout(index, detail)} sharpRightCorners={nextIsSuffix} />
 		{/if}
 		{@const curvesInput = narrowWidgetProps(component.props, "CurveInput")}
 		{#if curvesInput}
--- a/frontend/src/components/widgets/buttons/ColorButton.svelte
+++ b/frontend/src/components/widgets/buttons/ColorButton.svelte
@@ -4,7 +4,7 @@
 	import type { Color } from "@graphite/wasm-communication/messages";

 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";

 	// emits: ["update:value"],
@@ -20,11 +20,16 @@
 	export let tooltip: string | undefined = undefined;
 	export let sharpRightCorners = false;

-	// TODO: Implement
-	$: chip = undefined;
+	function colorLabel(value: Color): string {
+		if (value.none) return "No Color";
+		const type = "Color"; // TODO: Add "Gradient" type
+		const hex = value.toHexNoAlpha();
+		const alpha = value.alpha === 1 ? undefined : `${Math.floor(value.alpha * 100)}%`;
+		return [type, hex, alpha].filter((x) => x).join(" — ");
+	}
 </script>

-<LayoutRow class="color-input" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
+<LayoutCol class="color-button" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
 	<button
 		class:none={value.none}
 		class:sharp-right-corners={sharpRightCorners}
@@ -32,11 +37,7 @@
 		on:click={() => (open = true)}
 		tabindex="0"
 		data-floating-menu-spawner
-	>
-		{#if chip}
-			<TextLabel class="chip" bold={true}>{chip}</TextLabel>
-		{/if}
-	</button>
+	></button>
 	<ColorPicker
 		{open}
 		on:open={({ detail }) => (open = detail)}
@@ -47,15 +48,12 @@
 		}}
 		{allowNone}
 	/>
-</LayoutRow>
+	<TextLabel>{colorLabel(value)}</TextLabel>
+</LayoutCol>

 <style lang="scss" global>
-	.color-input {
-		box-sizing: border-box;
+	.color-button {
 		position: relative;
-		border: 1px solid var(--color-5-dullgray);
-		border-radius: 2px;
-		padding: 1px;
 		min-width: 80px;

 		> button {
@@ -65,8 +63,10 @@
 			margin: 0;
 			padding: 0;
 			width: 100%;
-			height: 100%;
-			border-radius: 1px;
+			height: 16px;
+			// TODO: Find a way to work around Chrome's light-colored antialiasing artifacts around the rounded parts of the pill border most visible when the color is dark colored
+			border: 1px solid var(--color-5-dullgray);
+			border-radius: 10000px;

 			&::before {
 				content: "";
@@ -88,29 +88,19 @@
 				background-size: var(--color-none-size-24px);
 				background-image: var(--color-none-image-24px);
 			}
-
-			.chip {
-				position: absolute;
-				bottom: -1px;
-				right: 0;
-				height: 13px;
-				line-height: 13px;
-				background: var(--color-f-white);
-				color: var(--color-2-mildblack);
-				border-radius: 4px 0 0 0;
-				padding: 0 4px;
-				font-size: 10px;
-				box-shadow: 0 0 2px var(--color-3-darkgray);
-			}
-		}
-
-		&.color-input.color-input > button {
-			outline-offset: 0;
 		}

 		> .floating-menu {
 			left: 50%;
 			bottom: 0;
 		}
+
+		> .text-label {
+			margin-top: 1px;
+			height: 24px - 16px - 1px;
+			line-height: 24px - 16px - 1px;
+			font-size: 10px;
+			text-align: center;
+		}
 	}
 </style>
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.svelte
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.svelte
@@ -37,11 +37,11 @@

 <LayoutCol class="swatch-pair">
 	<LayoutRow class="primary swatch">
-		<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
+		<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
 		<ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 	<LayoutRow class="secondary swatch">
-		<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
+		<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
 		<ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" />
 	</LayoutRow>
 </LayoutCol>
@@ -70,6 +70,11 @@
 				background-size: var(--color-transparent-checkered-background-size);
 				background-position: var(--color-transparent-checkered-background-position);
 				overflow: hidden;
+
+				&:hover,
+				&.open {
+					border-color: var(--color-6-lowergray);
+				}
 			}

 			.floating-menu {
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -762,7 +762,7 @@ export class CheckboxInput extends WidgetProps {
 	tooltip!: string | undefined;
 }

-export class ColorInput extends WidgetProps {
+export class ColorButton extends WidgetProps {
 	@Transform(({ value }: { value: { red: number; green: number; blue: number; alpha: number } | undefined }) =>
 		value === undefined ? new Color("none") : new Color(value.red, value.green, value.blue, value.alpha),
 	)
@@ -1130,7 +1130,7 @@ export class PivotAssist extends WidgetProps {
 const widgetSubTypes = [
 	{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons" },
 	{ value: CheckboxInput, name: "CheckboxInput" },
-	{ value: ColorInput, name: "ColorInput" },
+	{ value: ColorButton, name: "ColorButton" },
 	{ value: CurveInput, name: "CurveInput" },
 	{ value: DropdownInput, name: "DropdownInput" },
 	{ value: FontInput, name: "FontInput" },