Tweak the design of the RadioInput widget

frontend/src/components/panels/Spreadsheet.svelte

@@ -42,7 +42,7 @@
 			width: calc(100% + 2 * 4px);
 			margin-top: 8px;
 
-			span {
+			.text-label {
 				white-space: wrap;
 			}
 		}

frontend/src/components/views/Graph.svelte

@@ -994,7 +994,7 @@
 				{/if}
 				<div class="details">
 					<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
-					<span>{node.displayName}</span>
+					<TextLabel>{node.displayName}</TextLabel>
 				</div>
 				<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
 				<IconButton
@@ -1585,7 +1585,7 @@
 			.details {
 				margin: 0 8px;
 
-				span {
+				.text-label {
 					white-space: nowrap;
 					line-height: 48px;
 				}

frontend/src/components/widgets/WidgetLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages";
 
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
 	import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
 	import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
@@ -19,7 +20,7 @@
 	{:else if isWidgetTable(layoutGroup)}
 		<WidgetTable widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
 	{:else}
-		<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
+		<TextLabel styles={{ color: "#d6536e" }}>Error: The widget layout that belongs here has an invalid layout group type</TextLabel>
 	{/if}
 {/each}
 

frontend/src/components/widgets/WidgetSection.svelte

@@ -65,11 +65,11 @@
 				{#if isWidgetSpanRow(layoutGroup)}
 					<WidgetSpan widgetData={layoutGroup} {layoutTarget} />
 				{:else if isWidgetSpanColumn(layoutGroup)}
-					<span style="color: #d6536e">Error: The WidgetSpan used here should be a row not a column</span>
+					<TextLabel styles={{ color: "#d6536e" }}>Error: The WidgetSpan used here should be a row not a column</TextLabel>
 				{:else if isWidgetSection(layoutGroup)}
 					<svelte:self widgetData={layoutGroup} {layoutTarget} />
 				{:else}
-					<span style="color: #d6536e">Error: The widget that belongs here has an invalid layout group type</span>
+					<TextLabel styles={{ color: "#d6536e" }}>Error: The widget that belongs here has an invalid layout group type</TextLabel>
 				{/if}
 			{/each}
 		</LayoutCol>

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -155,7 +155,7 @@
 			&.disabled {
 				background: var(--color-2-mildblack);
 
-				span {
+				.text-label {
 					color: var(--color-8-uppergray);
 				}
 

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -156,7 +156,7 @@
 			&.open {
 				background: var(--color-6-lowergray);
 
-				span {
+				.text-label {
 					color: var(--color-f-white);
 				}
 			}
@@ -168,7 +168,7 @@
 			&.disabled {
 				background: var(--color-2-mildblack);
 
-				span {
+				.text-label {
 					color: var(--color-8-uppergray);
 				}
 			}

frontend/src/components/widgets/inputs/RadioInput.svelte

@@ -24,14 +24,14 @@
 	}
 </script>
 
-<LayoutRow class="radio-input" classes={{ disabled }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
+<LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
 	{#each entries as entry, index}
-		<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
+		<button class:active={!mixed ? index === selectedIndex : undefined} on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
 			{#if entry.icon}
 				<IconLabel icon={entry.icon} />
 			{/if}
 			{#if entry.label}
-				<TextLabel italic={mixed}>{entry.label}</TextLabel>
+				<TextLabel>{entry.label}</TextLabel>
 			{/if}
 		</button>
 	{/each}
@@ -39,12 +39,17 @@
 
 <style lang="scss" global>
 	.radio-input {
+		background: var(--color-5-dullgray);
+		border-radius: 2px;
+		height: 24px;
+
 		button {
 			background: var(--color-5-dullgray);
 			fill: var(--color-e-nearwhite);
-			height: 24px;
+			border-radius: 2px;
-			margin: 0;
+			height: 20px;
 			padding: 0;
+			margin: 2px 1px;
 			border: none;
 			display: flex;
 			align-items: center;
@@ -54,8 +59,12 @@
 			min-width: fit-content;
 			flex: 1 1 0;
 
-			&.mixed {
+			&:first-of-type {
-				background: var(--color-4-dimgray);
+				margin-left: 2px;
+			}
+
+			&:last-of-type {
+				margin-right: 2px;
 			}
 
 			&:hover {
@@ -76,7 +85,34 @@
 				}
 			}
 
-			&.disabled {
+			.icon-label {
+				margin: 2px;
+
+				+ .text-label {
+					margin-left: 0;
+				}
+			}
+
+			.text-label {
+				margin: 0 8px;
+				overflow: hidden;
+				flex: 0 0 auto;
+			}
+		}
+
+		&.mixed {
+			background: var(--color-4-dimgray);
+
+			button:not(:hover),
+			&.disabled button:hover {
+				background: var(--color-5-dullgray);
+			}
+		}
+
+		&.disabled {
+			background: var(--color-4-dimgray);
+
+			button {
 				background: var(--color-4-dimgray);
 				color: var(--color-8-uppergray);
 
@@ -93,37 +129,6 @@
 					}
 				}
 			}
-
-			& + button {
-				margin-left: 1px;
-			}
-
-			&:first-of-type {
-				border-radius: 2px 0 0 2px;
-			}
-
-			&:last-of-type {
-				border-radius: 0 2px 2px 0;
-			}
-
-			.icon-label {
-				margin: 0 4px;
-
-				+ .text-label {
-					margin-left: 0;
-				}
-			}
-
-			.text-label {
-				margin: 0 8px;
-				overflow: hidden;
-				flex: 0 0 auto;
-			}
-		}
-
-		&.combined-before button:first-of-type,
-		&.combined-after button:last-of-type {
-			border-radius: 0;
 		}
 	}
 </style>

frontend/src/components/window/workspace/Panel.svelte

@@ -248,7 +248,7 @@
 						}
 					}
 
-					span {
+					.text-label {
 						flex: 1 1 100%;
 						overflow-x: hidden;
 						white-space: nowrap;