Redesign the ColorButton widget style

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

@@ -125,10 +125,13 @@ pub struct ColorButton {
 	#[widget_builder(constructor)]
 	pub value: Option<Color>,
 
+	pub disabled: bool,
+
 	// TODO: Implement
 	// #[serde(rename = "allowTransparency")]
 	// #[derivative(Default(value = "false"))]
 	// pub allow_transparency: bool,
+	//
 	#[serde(rename = "allowNone")]
 	#[derivative(Default(value = "true"))]
 	pub allow_none: bool,

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -10,7 +10,6 @@
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
 	import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
@@ -29,7 +28,6 @@
 		blue: [0, 0, 1],
 		magenta: [1, 0, 1],
 	};
-	const COLOR_SPACE_CHOICES = [[{ label: "sRGB" }]];
 
 	const editor = getContext<Editor>("editor");
 
@@ -37,8 +35,8 @@
 	const dispatch = createEventDispatcher<{ color: Color }>();
 
 	export let color: Color;
-	// export let allowTransparency = false; // TODO: Implement
 	export let allowNone = false;
+	// export let allowTransparency = false; // TODO: Implement
 	export let direction: MenuDirection = "Bottom";
 	// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
 	export let open: boolean;
@@ -62,6 +60,8 @@
 	let draggingPickerTrack: HTMLDivElement | undefined = undefined;
 	let strayCloses = true;
 
+	let hexCodeInputWidget: TextInput | undefined;
+
 	$: watchOpen(open);
 	$: watchColor(color);
 
@@ -77,7 +77,11 @@
 	}
 
 	function watchOpen(open: boolean) {
-		if (!open) setInitialHSVA(hue, saturation, value, alpha, isNone);
+		if (open) {
+			setTimeout(() => hexCodeInputWidget?.focus(), 0);
+		} else {
+			setInitialHSVA(hue, saturation, value, alpha, isNone);
+		}
 	}
 
 	function watchColor(color: Color) {
@@ -302,9 +306,9 @@
 					<TextLabel>Initial</TextLabel>
 				</LayoutCol>
 			</LayoutRow>
-			<DropdownInput entries={COLOR_SPACE_CHOICES} selectedIndex={0} disabled={true} tooltip="Color Space and HDR (coming soon)" />
+			<!-- <DropdownInput entries={[[{ label: "sRGB" }]]} selectedIndex={0} disabled={true} tooltip="Color model, color space, and HDR (coming soon)" /> -->
 			<LayoutRow>
-				<TextLabel tooltip="Color code in hexadecimal format">Hex</TextLabel>
+				<TextLabel tooltip={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}>Hex</TextLabel>
 				<Separator />
 				<LayoutRow>
 					<TextInput
@@ -312,6 +316,7 @@
 						on:commitText={({ detail }) => setColorCode(detail)}
 						centered={true}
 						tooltip={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}
+						bind:this={hexCodeInputWidget}
 					/>
 				</LayoutRow>
 			</LayoutRow>
@@ -338,9 +343,9 @@
 				</LayoutRow>
 			</LayoutRow>
 			<LayoutRow>
-				<TextLabel tooltip={"Hue/Saturation/Value, also known as Hue/Saturation/Brightness (HSB).\nNot to be confused with Hue/Saturation/Lightness (HSL), a different color model."}
+				<TextLabel tooltip={"Hue/Saturation/Value, also known as Hue/Saturation/Brightness (HSB).\nNot to be confused with Hue/Saturation/Lightness (HSL), a different color model."}>
-					>HSV</TextLabel
+					HSV
-				>
+				</TextLabel>
 				<Separator />
 				<LayoutRow>
 					{#each hsvChannels as [channel, strength], index}
@@ -358,9 +363,9 @@
 							unit={channel === "h" ? "°" : "%"}
 							minWidth={56}
 							tooltip={{
-								h: `Hue component, the "color" along the rainbow`,
+								h: `Hue component, the shade along the spectrum of the rainbow`,
-								s: `Saturation component, the "colorfulness" from gray to vivid`,
+								s: `Saturation component, the vividness from grayscale to full color`,
-								v: "Value (or Brightness), the distance away from being darkened to black",
+								v: "Value component, the brightness from black to full color",
 							}[channel]}
 						/>
 					{/each}

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

@@ -13,31 +13,18 @@
 	let open = false;
 
 	export let value: Color;
-	// TODO: Implement
+	export let disabled = false;
-	// export let allowTransparency = false;
-	// export let disabled = false;
 	export let allowNone = false;
+	// export let allowTransparency = false; // TODO: Implement
 	export let tooltip: string | undefined = undefined;
 	export let sharpRightCorners = false;
-
-	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>
 
-<LayoutCol class="color-button" classes={{ "sharp-right-corners": sharpRightCorners }} {tooltip}>
+<LayoutCol class="color-button" classes={{ disabled, none: value.none, open, "sharp-right-corners": sharpRightCorners }} {tooltip}>
-	<button
+	<button {disabled} style:--chosen-color={value.toHexOptionalAlpha()} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner></button>
-		class:none={value.none}
+	{#if disabled && !value.none}
-		class:sharp-right-corners={sharpRightCorners}
+		<TextLabel>sRGB</TextLabel>
-		style:--chosen-color={value.toHexOptionalAlpha()}
+	{/if}
-		on:click={() => (open = true)}
-		tabindex="0"
-		data-floating-menu-spawner
-	></button>
 	<ColorPicker
 		{open}
 		on:open={({ detail }) => (open = detail)}
@@ -48,59 +35,89 @@
 		}}
 		{allowNone}
 	/>
-	<TextLabel>{colorLabel(value)}</TextLabel>
 </LayoutCol>
 
 <style lang="scss" global>
 	.color-button {
 		position: relative;
 		min-width: 80px;
+		border-radius: 2px;
+		background: var(--color-5-dullgray);
+
+		&:hover,
+		&.open {
+			&,
+			> .text-label {
+				background: rgba(var(--color-6-lowergray-rgb), 50%);
+			}
+		}
+
+		&.disabled {
+			&,
+			> .text-label {
+				background: var(--color-4-dimgray);
+				color: var(--color-8-uppergray);
+			}
+		}
+
+		&.sharp-right-corners {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
 
 		> button {
-			position: relative;
-			overflow: hidden;
 			border: none;
-			margin: 0;
 			padding: 0;
-			width: 100%;
+			margin: 0;
-			height: 16px;
+			margin-left: 2px;
-			// 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
+			margin-top: 2px;
-			border: 1px solid var(--color-5-dullgray);
+			width: calc(100% - 4px);
-			border-radius: 10000px;
+			height: calc(100% - 4px);
+			background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
+			background-size: var(--color-transparent-checkered-background-size);
+			background-position: var(--color-transparent-checkered-background-position);
+		}
 
-			&::before {
+		&.none {
-				content: "";
+			> button {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				padding: 2px;
-				top: -2px;
-				left: -2px;
-				background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
-				background-size: var(--color-transparent-checkered-background-size);
-				background-position: var(--color-transparent-checkered-background-position);
-			}
-
-			&.none {
 				background: var(--color-none);
 				background-repeat: var(--color-none-repeat);
 				background-position: var(--color-none-position);
 				background-size: var(--color-none-size-24px);
 				background-image: var(--color-none-image-24px);
 			}
+
+			&.disabled {
+				> button::after {
+					content: "";
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					background: rgba(var(--color-4-dimgray-rgb), 50%);
+				}
+			}
+		}
+
+		> .text-label {
+			background: rgba(var(--color-5-dullgray-rgb), 50%);
+			font-size: 10px;
+			line-height: 12px;
+			height: 12px;
+			border-radius: 6px 0 0 6px;
+			padding-right: 2px;
+			padding-left: 4px;
+			margin: auto;
+			position: absolute;
+			right: 0;
+			top: 0;
+			bottom: 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>

frontend/src/wasm-communication/messages.ts

@@ -770,11 +770,11 @@ export class ColorButton extends WidgetProps {
 	)
 	value!: Color;
 
+	disabled!: boolean;
+
 	allowNone!: boolean;
 
-	// TODO: Implement
+	// allowTransparency!: boolean; // TODO: Implement
-	// allowTransparency!: boolean;
-	// disabled!: boolean;
 
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltip!: string | undefined;