Move gradient picking into the color picker (#1778)

* Gradient picker

* Fix up color picker layout CSS problems

* Begin hooking up SpectrumInput for gradient in the ColorPicker

* Working gradient picking on the frontend only

* Plumb FillColorChoice into the backend

* Hook everything else up, just with a weird bug remaining

* Fix some svelty reactivity issues

* Add and remove stops

* Cleanup

* Rename type

* Fill node document format upgrading

* Fix lint

* Polish the color picker UX and fix a bug

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -5,7 +5,6 @@
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	let self: MenuList;
@@ -74,9 +73,6 @@
 				<IconLabel icon={hoverIcon} />
 			{/if}
 		{/if}
-		{#if icon && label}
-			<Separator type={flush ? "Unrelated" : "Related"} />
-		{/if}
 		{#if label}
 			<TextLabel>{label}</TextLabel>
 		{/if}
@@ -161,22 +157,26 @@
 			}
 		}
 
-		.widget-span.row > & + .text-button,
-		.layout-row > & + .text-button {
-			margin-left: 8px;
-		}
-
-		.widget-span.column > & + .text-button,
-		.layout-column > & + .text-button {
-			margin-top: 8px;
-		}
-
 		.icon-label {
 			fill: var(--button-text-color);
+
+			+ .text-label {
+				margin-left: 8px;
+			}
 		}
 
 		.text-label {
 			overflow: hidden;
 		}
+
+		// Custom styling for when multiple TextButton widgets are used next to one another in a row or column
+		.widget-span.row > & + .text-button,
+		.layout-row > & + .text-button {
+			margin-left: 8px;
+		}
+		.widget-span.column > & + .text-button,
+		.layout-column > & + .text-button {
+			margin-top: 8px;
+		}
 	}
 </style>