From 2ae35a67e70bcafc033cc9f6c00f1462a28adc4f Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 6 May 2026 19:26:26 -0700
Subject: [PATCH] Add icons for text alignment/justification

---
 .branding                                     |  4 +-
 .../messages/tool/tool_messages/text_tool.rs  | 37 ++++++-----
 frontend/src/icons.ts                         | 18 ++++++
 node-graph/libraries/core-types/src/text.rs   | 62 -------------------
 node-graph/nodes/text/src/lib.rs              |  7 +++
 5 files changed, 45 insertions(+), 83 deletions(-)
 delete mode 100644 node-graph/libraries/core-types/src/text.rs

diff --git a/.branding b/.branding
index dcfcb9d1..50217994 100644
--- a/.branding
+++ b/.branding
@@ -1,2 +1,2 @@
-https://github.com/Keavon/graphite-branded-assets/archive/1509880500e32cb21235343ba865adcf0579133f.tar.gz
-89b4c58aee186b0c1610a8778bd199c9bdaf1191b4006e6b007dc40a402f4aa7
+https://github.com/Keavon/graphite-branded-assets/archive/b83626b10f0f9102503c845354e9e3f161949ce0.tar.gz
+353e9cba90f420b11863055a32e554937638b47d1539632ef0e8a30f37a353d7
diff --git a/editor/src/messages/tool/tool_messages/text_tool.rs b/editor/src/messages/tool/tool_messages/text_tool.rs
index a91d9101..0e054757 100644
--- a/editor/src/messages/tool/tool_messages/text_tool.rs
+++ b/editor/src/messages/tool/tool_messages/text_tool.rs
@@ -17,6 +17,7 @@ use crate::messages::tool::common_functionality::utility_functions::text_boundin
 use crate::messages::tool::utility_types::ToolRefreshOptions;
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{NodeId, NodeInput};
+use graphene_std::choice_type::ChoiceTypeStatic;
 use graphene_std::renderer::Quad;
 use graphene_std::text::{Font, FontCache, TextAlign, TypesettingConfig, lines_clipping};
 use graphene_std::vector::style::Fill;
@@ -204,25 +205,23 @@ fn create_text_widgets(tool: &TextTool, font_catalog: &FontCatalog) -> Vec<Widge
 			.into()
 		})
 		.widget_instance();
-	let align_entries: Vec<_> = [
-		TextAlign::AlignLeft,
-		TextAlign::AlignCenter,
-		TextAlign::AlignRight,
-		TextAlign::JustifyLeft,
-		TextAlign::JustifyCenter,
-		TextAlign::JustifyRight,
-		TextAlign::JustifyAll,
-	]
-	.into_iter()
-	.map(|align| {
-		RadioEntryData::new(format!("{align:?}")).label(align.to_string()).on_update(move |_| {
-			TextToolMessage::UpdateOptions {
-				options: TextOptionsUpdate::Align(align),
-			}
-			.into()
+	let align_entries: Vec<_> = TextAlign::list()
+		.iter()
+		.flat_map(|section| section.iter())
+		.map(|(item, var_meta)| {
+			let align = *item;
+			let entry = RadioEntryData::new(var_meta.name)
+				.tooltip_label(var_meta.label)
+				.tooltip_description(var_meta.description.unwrap_or_default())
+				.on_update(move |_| {
+					TextToolMessage::UpdateOptions {
+						options: TextOptionsUpdate::Align(align),
+					}
+					.into()
+				});
+			if let Some(icon) = var_meta.icon { entry.icon(icon) } else { entry.label(var_meta.label) }
 		})
-	})
-	.collect();
+		.collect();
 	let align = RadioInput::new(align_entries).selected_index(Some(tool.options.align as u32)).widget_instance();
 	vec![
 		font,
@@ -232,7 +231,7 @@ fn create_text_widgets(tool: &TextTool, font_catalog: &FontCatalog) -> Vec<Widge
 		size,
 		Separator::new(SeparatorStyle::Related).widget_instance(),
 		line_height_ratio,
-		Separator::new(SeparatorStyle::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 		align,
 	]
 }
diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
index dca36fdb..86491617 100644
--- a/frontend/src/icons.ts
+++ b/frontend/src/icons.ts
@@ -199,6 +199,15 @@ import StackLower from "/../branding/assets/icon-16px-solid/stack-lower.svg";
 import StackRaise from "/../branding/assets/icon-16px-solid/stack-raise.svg";
 import StackReverse from "/../branding/assets/icon-16px-solid/stack-reverse.svg";
 import Stack from "/../branding/assets/icon-16px-solid/stack.svg";
+import TextAlignCenter from "/../branding/assets/icon-16px-solid/text-align-center.svg";
+import TextAlignLeft from "/../branding/assets/icon-16px-solid/text-align-left.svg";
+import TextAlignRight from "/../branding/assets/icon-16px-solid/text-align-right.svg";
+import TextAlignSpineAway from "/../branding/assets/icon-16px-solid/text-align-spine-away.svg";
+import TextAlignSpineTowards from "/../branding/assets/icon-16px-solid/text-align-spine-towards.svg";
+import TextJustifyAll from "/../branding/assets/icon-16px-solid/text-justify-all.svg";
+import TextJustifyCenter from "/../branding/assets/icon-16px-solid/text-justify-center.svg";
+import TextJustifyLeft from "/../branding/assets/icon-16px-solid/text-justify-left.svg";
+import TextJustifyRight from "/../branding/assets/icon-16px-solid/text-justify-right.svg";
 import TiltReset from "/../branding/assets/icon-16px-solid/tilt-reset.svg";
 import Tilt from "/../branding/assets/icon-16px-solid/tilt.svg";
 import TransformationGrab from "/../branding/assets/icon-16px-solid/transformation-grab.svg";
@@ -318,6 +327,15 @@ const SOLID_16PX = {
 	StackLower: { svg: StackLower, size: 16 },
 	StackRaise: { svg: StackRaise, size: 16 },
 	StackReverse: { svg: StackReverse, size: 16 },
+	TextAlignCenter: { svg: TextAlignCenter, size: 16 },
+	TextAlignLeft: { svg: TextAlignLeft, size: 16 },
+	TextAlignRight: { svg: TextAlignRight, size: 16 },
+	TextAlignSpineAway: { svg: TextAlignSpineAway, size: 16 },
+	TextAlignSpineTowards: { svg: TextAlignSpineTowards, size: 16 },
+	TextJustifyAll: { svg: TextJustifyAll, size: 16 },
+	TextJustifyCenter: { svg: TextJustifyCenter, size: 16 },
+	TextJustifyLeft: { svg: TextJustifyLeft, size: 16 },
+	TextJustifyRight: { svg: TextJustifyRight, size: 16 },
 	Tilt: { svg: Tilt, size: 16 },
 	TiltReset: { svg: TiltReset, size: 16 },
 	TransformationGrab: { svg: TransformationGrab, size: 16 },
diff --git a/node-graph/libraries/core-types/src/text.rs b/node-graph/libraries/core-types/src/text.rs
deleted file mode 100644
index 81adab35..00000000
--- a/node-graph/libraries/core-types/src/text.rs
+++ /dev/null
@@ -1,62 +0,0 @@
-mod font_cache;
-mod path_builder;
-mod text_context;
-mod to_path;
-
-use dyn_any::DynAny;
-pub use font_cache::*;
-pub use text_context::TextContext;
-pub use to_path::*;
-
-/// Alignment of lines of type within a text block.
-#[repr(C)]
-#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
-#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, DynAny, node_macro::ChoiceType)]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
-#[widget(Radio)]
-pub enum TextAlign {
-	#[default]
-	Left,
-	Center,
-	Right,
-	#[label("Justify")]
-	JustifyLeft,
-	// TODO: JustifyCenter, JustifyRight, JustifyAll
-}
-
-impl From<TextAlign> for parley::Alignment {
-	fn from(val: TextAlign) -> Self {
-		match val {
-			TextAlign::Left => parley::Alignment::Left,
-			TextAlign::Center => parley::Alignment::Center,
-			TextAlign::Right => parley::Alignment::Right,
-			TextAlign::JustifyLeft => parley::Alignment::Justify,
-		}
-	}
-}
-
-#[derive(PartialEq, Clone, Copy, Debug)]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
-pub struct TypesettingConfig {
-	pub font_size: f64,
-	pub line_height_ratio: f64,
-	pub character_spacing: f64,
-	pub max_width: Option<f64>,
-	pub max_height: Option<f64>,
-	pub tilt: f64,
-	pub align: TextAlign,
-}
-
-impl Default for TypesettingConfig {
-	fn default() -> Self {
-		Self {
-			font_size: 24.,
-			line_height_ratio: 1.2,
-			character_spacing: 0.,
-			max_width: None,
-			max_height: None,
-			tilt: 0.,
-			align: TextAlign::default(),
-		}
-	}
-}
diff --git a/node-graph/nodes/text/src/lib.rs b/node-graph/nodes/text/src/lib.rs
index 7d60038d..a9605780 100644
--- a/node-graph/nodes/text/src/lib.rs
+++ b/node-graph/nodes/text/src/lib.rs
@@ -31,12 +31,19 @@ pub use vector_types;
 #[widget(Radio)]
 pub enum TextAlign {
 	#[default]
+	#[icon("TextAlignLeft")]
 	AlignLeft,
+	#[icon("TextAlignCenter")]
 	AlignCenter,
+	#[icon("TextAlignRight")]
 	AlignRight,
+	#[icon("TextJustifyLeft")]
 	JustifyLeft,
+	#[icon("TextJustifyCenter")]
 	JustifyCenter,
+	#[icon("TextJustifyRight")]
 	JustifyRight,
+	#[icon("TextJustifyAll")]
 	JustifyAll,
 }