From afc84d30f85138910503ccb898490a2cf19dc6f9 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 4 Nov 2022 05:56:33 -0700
Subject: [PATCH] Revamp UI styling to remove accent color; improve tab
 navigation

---
 .../utility_types/widgets/input_widgets.rs    |  5 ++
 .../assets/icon-12px-solid/empty-12px.svg     |  2 +
 frontend/assets/icon-12px-solid/grid.svg      | 16 ++---
 frontend/public/index.html                    |  1 -
 frontend/src/App.vue                          | 68 +++++++++++--------
 .../components/floating-menus/ColorPicker.vue | 26 +++----
 .../components/floating-menus/MenuList.vue    | 16 +++--
 .../src/components/layout/FloatingMenu.vue    |  2 +
 frontend/src/components/panels/Document.vue   | 35 +++++-----
 frontend/src/components/panels/LayerTree.vue  |  8 +--
 .../widgets/assists/PivotAssist.vue           | 29 ++++----
 .../components/widgets/buttons/IconButton.vue |  9 ++-
 .../widgets/buttons/PopoverButton.vue         |  6 +-
 .../components/widgets/buttons/TextButton.vue | 28 ++++----
 .../widgets/groups/WidgetSection.vue          |  2 +-
 .../widgets/inputs/CheckboxInput.vue          | 67 +++++++++++++-----
 .../components/widgets/inputs/ColorInput.vue  | 15 ++--
 .../widgets/inputs/DropdownInput.vue          |  2 +-
 .../components/widgets/inputs/FieldInput.vue  |  7 +-
 .../components/widgets/inputs/FontInput.vue   | 11 ++-
 .../widgets/inputs/MenuBarInput.vue           |  2 +-
 .../components/widgets/inputs/NumberInput.vue |  5 +-
 .../widgets/inputs/OptionalInput.vue          | 18 +----
 .../components/widgets/inputs/RadioInput.vue  | 16 +++--
 .../widgets/inputs/SwatchPairInput.vue        | 22 +++---
 .../widgets/labels/UserInputLabel.vue         | 17 ++---
 .../widgets/metrics/PersistentScrollbar.vue   |  5 +-
 frontend/src/io-managers/input.ts             |  6 +-
 frontend/src/utility-functions/icons.ts       |  2 +
 frontend/src/wasm-communication/messages.ts   |  4 ++
 30 files changed, 258 insertions(+), 194 deletions(-)
 create mode 100644 frontend/assets/icon-12px-solid/empty-12px.svg

diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 8ac3f7e7f2..24f1a627f6 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -11,6 +11,8 @@ use serde::{Deserialize, Serialize};
 pub struct CheckboxInput {
 	pub checked: bool,
 
+	pub disabled: bool,
+
 	pub icon: String,
 
 	pub tooltip: String,
@@ -28,6 +30,7 @@ impl Default for CheckboxInput {
 	fn default() -> Self {
 		Self {
 			checked: false,
+			disabled: false,
 			icon: "Checkmark".into(),
 			tooltip: Default::default(),
 			tooltip_shortcut: Default::default(),
@@ -215,6 +218,8 @@ pub enum NumberInputIncrementBehavior {
 pub struct OptionalInput {
 	pub checked: bool,
 
+	pub disabled: bool,
+
 	pub icon: String,
 
 	pub tooltip: String,
diff --git a/frontend/assets/icon-12px-solid/empty-12px.svg b/frontend/assets/icon-12px-solid/empty-12px.svg
new file mode 100644
index 0000000000..ed62aab166
--- /dev/null
+++ b/frontend/assets/icon-12px-solid/empty-12px.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+</svg>
diff --git a/frontend/assets/icon-12px-solid/grid.svg b/frontend/assets/icon-12px-solid/grid.svg
index f0a474d51b..0a783514ee 100644
--- a/frontend/assets/icon-12px-solid/grid.svg
+++ b/frontend/assets/icon-12px-solid/grid.svg
@@ -1,10 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
-	<rect width="1" height="12" x="4" y="0" />
-	<rect width="1" height="12" x="1" y="0" />
-	<rect width="1" height="12" x="7" y="0" />
-	<rect width="1" height="12" x="10" y="0" />
-	<rect width="12" height="1" x="0" y="4" />
-	<rect width="12" height="1" x="0" y="1" />
-	<rect width="12" height="1" x="0" y="7" />
-	<rect width="12" height="1" x="0" y="10" />
+	<rect width="1" height="10" x="1" y="1" />
+	<rect width="1" height="10" x="4" y="1" />
+	<rect width="1" height="10" x="7" y="1" />
+	<rect width="1" height="10" x="10" y="1" />
+	<rect width="10" height="1" x="1" y="1" />
+	<rect width="10" height="1" x="1" y="4" />
+	<rect width="10" height="1" x="1" y="7" />
+	<rect width="10" height="1" x="1" y="10" />
 </svg>
diff --git a/frontend/public/index.html b/frontend/public/index.html
index c261fee347..9ed9a04220 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -19,7 +19,6 @@
 
 <body>
 	<noscript>JavaScript is required</noscript>
-	<!-- tabindex is used to allow the app to have focus while inside of it -->
 	<div data-app id="app" tabindex="0"></div>
 	<script>
 	// Confirm the browser is compatible before initializing the application
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6a9f6e9893..a4a4ae1fc9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -39,18 +39,6 @@
 	--color-f-white: #fff;
 	--color-f-white-rgb: 255, 255, 255;
 
-	--color-accent: #3194d6;
-	--color-accent-rgb: 49, 148, 214;
-	--color-accent-hover: #49a5e2;
-	--color-accent-hover-rgb: 73, 165, 226;
-	--color-accent-disabled: #416277;
-	--color-accent-disabled-rgb: 65, 98, 119;
-
-	--color-node-background: #f1decd;
-	--color-node-background-rgb: 241, 222, 205;
-	--color-node-icon: #473a3a;
-	--color-node-icon-rgb: 71, 58, 58;
-
 	--color-data-general: #c5c5c5;
 	--color-data-general-rgb: 197, 197, 197;
 	--color-data-vector: #65bbe5;
@@ -78,10 +66,10 @@
 	--color-none-size-32px: 80px 32px;
 	--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>');
 
-	--transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
+	--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);
-	--transparent-checkered-background-size: 16px 16px;
-	--transparent-checkered-background-position: 0 0, 8px 8px;
+	--color-transparent-checkered-background-size: 16px 16px;
+	--color-transparent-checkered-background-position: 0 0, 8px 8px;
 }
 
 html,
@@ -92,7 +80,6 @@ body,
 	background: var(--color-2-mildblack);
 	user-select: none;
 	overscroll-behavior: none;
-	outline: none;
 }
 
 html,
@@ -107,10 +94,6 @@ button {
 	color: var(--color-e-nearwhite);
 }
 
-::selection {
-	background: var(--color-accent);
-}
-
 svg,
 img {
 	display: block;
@@ -190,21 +173,50 @@ img {
 	}
 }
 
+// List of all elements that should show an outline when focused by tabbing or by clicking the element
+.dropdown-input .dropdown-box,
+.font-input .dropdown-box {
+	&:focus {
+		outline: 1px dashed var(--color-e-nearwhite);
+		outline-offset: -1px;
+	}
+}
+
+// List of all elements that should show an outline when focused by tabbing, but not by clicking the element
 .icon-button,
 .text-button,
 .popover-button,
-.checkbox-input label,
-.color-input .swatch .swatch-button,
-.dropdown-input .dropdown-box,
-.font-input .dropdown-box,
+.color-input > button,
+.color-picker .preset-color,
+.swatch-pair .swatch > button,
 .radio-input button,
 .menu-list,
-.menu-bar-input .entry {
-	&:focus-visible,
-	&.dropdown-box:focus {
-		outline: 1px dashed var(--color-accent);
+.menu-bar-input .entry,
+.layer-tree .expand-arrow,
+.widget-section .header {
+	&:focus-visible {
+		outline: 1px dashed var(--color-e-nearwhite);
 		outline-offset: -1px;
 	}
+
+	// Variant: dark outline over light colors
+	&.preset-color.white,
+	&.text-button.emphasized {
+		&:focus-visible {
+			outline: 1px dashed var(--color-2-mildblack);
+		}
+	}
+}
+
+// Checkbox needs to apply the focus outline to its sibling label
+.checkbox-input input:focus-visible + label {
+	outline: 1px dashed var(--color-e-nearwhite);
+	outline-offset: -1px;
+
+	// Variant: dark outline over light colors
+	&.checked {
+		outline: 1px dashed var(--color-2-mildblack);
+	}
 }
 
 // For placeholder messages (remove eventually)
diff --git a/frontend/src/components/floating-menus/ColorPicker.vue b/frontend/src/components/floating-menus/ColorPicker.vue
index ff187592aa..7f306531ab 100644
--- a/frontend/src/components/floating-menus/ColorPicker.vue
+++ b/frontend/src/components/floating-menus/ColorPicker.vue
@@ -108,13 +108,13 @@
 				/>
 				<LayoutRow class="leftover-space"></LayoutRow>
 				<LayoutRow>
-					<button class="preset-color none" @click="() => setColorPreset('none')" v-if="allowNone" title="Set none"></button>
+					<button class="preset-color none" @click="() => setColorPreset('none')" v-if="allowNone" title="Set none" tabindex="0"></button>
 					<Separator :type="'Related'" v-if="allowNone" />
-					<button class="preset-color black" @click="() => setColorPreset('black')" title="Set black"></button>
+					<button class="preset-color black" @click="() => setColorPreset('black')" title="Set black" tabindex="0"></button>
 					<Separator :type="'Related'" />
-					<button class="preset-color white" @click="() => setColorPreset('white')" title="Set white"></button>
+					<button class="preset-color white" @click="() => setColorPreset('white')" title="Set white" tabindex="0"></button>
 					<Separator :type="'Related'" />
-					<button class="preset-color pure" @click="(e: MouseEvent) => setColorPresetSubtile(e)">
+					<button class="preset-color pure" @click="(e: MouseEvent) => setColorPresetSubtile(e)" tabindex="-1">
 						<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red"></div>
 						<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow"></div>
 						<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green"></div>
@@ -170,9 +170,9 @@
 			height: 100%;
 			z-index: -1;
 			position: relative;
-			background: var(--transparent-checkered-background);
-			background-size: var(--transparent-checkered-background-size);
-			background-position: var(--transparent-checkered-background-position);
+			background: var(--color-transparent-checkered-background);
+			background-size: var(--color-transparent-checkered-background-size);
+			background-position: var(--color-transparent-checkered-background-position);
 		}
 		--selection-pincers-color: var(--new-color-contrasting);
 	}
@@ -256,7 +256,7 @@
 			overflow: hidden;
 
 			.new-color {
-				background: linear-gradient(var(--new-color), var(--new-color)), var(--transparent-checkered-background);
+				background: linear-gradient(var(--new-color), var(--new-color)), var(--color-transparent-checkered-background);
 
 				.text-label {
 					text-align: left;
@@ -266,7 +266,7 @@
 			}
 
 			.initial-color {
-				background: linear-gradient(var(--initial-color), var(--initial-color)), var(--transparent-checkered-background);
+				background: linear-gradient(var(--initial-color), var(--initial-color)), var(--color-transparent-checkered-background);
 
 				.text-label {
 					text-align: right;
@@ -279,8 +279,8 @@
 			.initial-color {
 				width: 50%;
 				height: 100%;
-				background-size: var(--transparent-checkered-background-size);
-				background-position: var(--transparent-checkered-background-position);
+				background-size: var(--color-transparent-checkered-background-size);
+				background-position: var(--color-transparent-checkered-background-position);
 
 				&.none {
 					background: var(--color-none);
@@ -299,7 +299,6 @@
 
 		.preset-color {
 			border: none;
-			outline: none;
 			padding: 0;
 			border-radius: 2px;
 			width: calc(48px + (48px + 4px) / 2);
@@ -342,7 +341,8 @@
 					background: var(--pure-color-gray);
 				}
 
-				&:hover div {
+				&:hover div,
+				&:focus div {
 					background: var(--pure-color);
 				}
 			}
diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index 4782b49032..17edbe558b 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -127,20 +127,24 @@
 			}
 
 			&:hover,
-			&.open,
-			&.active {
+			&.open {
 				background: var(--color-6-lowergray);
 				color: var(--color-f-white);
 
-				&.active {
-					background: var(--color-accent);
-				}
-
 				.entry-icon svg {
 					fill: var(--color-f-white);
 				}
 			}
 
+			&.active {
+				background: var(--color-e-nearwhite);
+				color: var(--color-2-mildblack);
+
+				.entry-icon svg {
+					fill: var(--color-2-mildblack);
+				}
+			}
+
 			&.disabled {
 				color: var(--color-8-uppergray);
 
diff --git a/frontend/src/components/layout/FloatingMenu.vue b/frontend/src/components/layout/FloatingMenu.vue
index 711bc7e473..5065a141d5 100644
--- a/frontend/src/components/layout/FloatingMenu.vue
+++ b/frontend/src/components/layout/FloatingMenu.vue
@@ -513,6 +513,8 @@ export default defineComponent({
 		async open(newState: boolean, oldState: boolean) {
 			// Switching from closed to open
 			if (newState && !oldState) {
+				// TODO: Close any other floating menus that may already be open, which can happen using tab navigation and Enter/Space Bar to open
+
 				// Close floating menu if pointer strays far enough away
 				window.addEventListener("pointermove", this.pointerMoveHandler);
 				// Close floating menu if esc is pressed
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 9456e44a5e..35018707ff 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -105,20 +105,22 @@
 					}
 				}
 
-				.color-solid {
-					fill: var(--color-f-white);
-				}
+				.icon-button:not(.active) {
+					.color-solid {
+						fill: var(--color-f-white);
+					}
 
-				.color-general {
-					fill: var(--color-data-general);
-				}
+					.color-general {
+						fill: var(--color-data-general);
+					}
 
-				.color-vector {
-					fill: var(--color-data-vector);
-				}
+					.color-vector {
+						fill: var(--color-data-vector);
+					}
 
-				.color-raster {
-					fill: var(--color-data-raster);
+					.color-raster {
+						fill: var(--color-data-raster);
+					}
 				}
 			}
 
@@ -190,6 +192,7 @@
 						pointer-events: auto;
 					}
 				}
+
 				foreignObject {
 					width: 10000px;
 					height: 10000px;
@@ -207,12 +210,12 @@
 						// Workaround to force Chrome to display the flashing text entry cursor when text is empty
 						padding-left: 1px;
 						margin-left: -1px;
-					}
 
-					div:focus {
-						border: none;
-						outline: none;
-						margin: -1px;
+						&:focus {
+							border: none;
+							outline: none; // Ok for contenteditable element
+							margin: -1px;
+						}
 					}
 				}
 			}
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index 3c1b19b991..d7327ad242 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -27,6 +27,7 @@
 						class="expand-arrow"
 						:class="{ expanded: listing.entry.layerMetadata.expanded }"
 						@click.stop="handleExpandArrowClick(listing.entry.path)"
+						tabindex="0"
 					></button>
 					<LayoutRow
 						class="layer"
@@ -128,7 +129,6 @@
 				width: 16px;
 				height: 100%;
 				padding: 0;
-				outline: none;
 				border: none;
 				position: relative;
 				background: none;
@@ -193,7 +193,7 @@
 						color: inherit;
 						background: none;
 						border: none;
-						outline: none;
+						outline: none; // Ok for input element
 						margin: 0;
 						padding: 0;
 						text-overflow: ellipsis;
@@ -243,7 +243,7 @@
 			}
 
 			&.insert-folder .layer {
-				outline: 3px solid var(--color-accent-hover);
+				outline: 3px solid var(--color-e-nearwhite);
 				outline-offset: -3px;
 			}
 		}
@@ -252,7 +252,7 @@
 			position: absolute;
 			// `left` is applied dynamically
 			right: 0;
-			background: var(--color-accent-hover);
+			background: var(--color-e-nearwhite);
 			margin-top: -2px;
 			height: 5px;
 			z-index: 1;
diff --git a/frontend/src/components/widgets/assists/PivotAssist.vue b/frontend/src/components/widgets/assists/PivotAssist.vue
index 2acc4681af..5df13f9485 100644
--- a/frontend/src/components/widgets/assists/PivotAssist.vue
+++ b/frontend/src/components/widgets/assists/PivotAssist.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="pivot-assist">
-		<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }"></button>
-		<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }"><div></div></button>
-		<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }"><div></div></button>
-		<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }"><div></div></button>
-		<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }"><div></div></button>
-		<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }"><div></div></button>
-		<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }"><div></div></button>
-		<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }"><div></div></button>
-		<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }"><div></div></button>
+		<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }" tabindex="-1"><div></div></button>
+		<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1"><div></div></button>
 	</div>
 </template>
 
@@ -25,9 +25,8 @@
 		height: 5px;
 		margin: 0;
 		padding: 0;
-		outline: none;
-		background: none;
-		border: 1px solid var(--color-7-middlegray);
+		background: var(--color-1-nearblack);
+		border: 1px solid var(--color-5-dullgray);
 
 		&:hover {
 			border-color: transparent;
@@ -36,7 +35,7 @@
 
 		&.active {
 			border-color: transparent;
-			background: var(--color-f-white);
+			background: var(--color-e-nearwhite);
 		}
 
 		&.col-1::before,
@@ -45,7 +44,7 @@
 			pointer-events: none;
 			width: 2px;
 			height: 0;
-			border-top: 1px solid var(--color-7-middlegray);
+			border-top: 1px solid var(--color-5-dullgray);
 			position: absolute;
 			top: 1px;
 			right: -3px;
@@ -57,7 +56,7 @@
 			pointer-events: none;
 			width: 0;
 			height: 2px;
-			border-left: 1px solid var(--color-7-middlegray);
+			border-left: 1px solid var(--color-5-dullgray);
 			position: absolute;
 			bottom: -3px;
 			right: 1px;
diff --git a/frontend/src/components/widgets/buttons/IconButton.vue b/frontend/src/components/widgets/buttons/IconButton.vue
index 8f1e0d514a..c8493e5aa5 100644
--- a/frontend/src/components/widgets/buttons/IconButton.vue
+++ b/frontend/src/components/widgets/buttons/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip">
+	<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="active ? -1 : 0">
 		<IconLabel :icon="icon" />
 	</button>
 </template>
@@ -11,7 +11,6 @@
 	align-items: center;
 	flex: 0 0 auto;
 	padding: 0;
-	outline: none;
 	border: none;
 	border-radius: 2px;
 	background: none;
@@ -26,7 +25,11 @@
 	}
 
 	&.active {
-		background: var(--color-accent);
+		background: var(--color-e-nearwhite);
+
+		svg {
+			fill: var(--color-2-mildblack);
+		}
 	}
 
 	&:hover:not(.active) {
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.vue b/frontend/src/components/widgets/buttons/PopoverButton.vue
index 2fdafeda97..179b3b696a 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.vue
+++ b/frontend/src/components/widgets/buttons/PopoverButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="popover-button">
-		<IconButton :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
+		<IconButton :class="{ open }" :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
 		<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
 			<slot></slot>
 		</FloatingMenu>
@@ -23,13 +23,13 @@
 		width: 100%;
 		height: 100%;
 		padding: 0;
-		outline: none;
 		border: none;
 		border-radius: 2px;
 		background: var(--color-1-nearblack);
 		fill: var(--color-e-nearwhite);
 
-		&:hover {
+		&:hover,
+		&.open {
 			background: var(--color-6-lowergray);
 			fill: var(--color-f-white);
 		}
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index c2784f7b20..2fd9fe1ce3 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/frontend/src/components/widgets/buttons/TextButton.vue
@@ -8,6 +8,7 @@
 		:title="tooltip"
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
+		:tabindex="disabled ? -1 : 0"
 	>
 		<IconLabel v-if="icon" :icon="icon" />
 		<TextLabel>{{ label }}</TextLabel>
@@ -23,7 +24,6 @@
 	height: 24px;
 	padding: 0 8px;
 	box-sizing: border-box;
-	outline: none;
 	border: none;
 	border-radius: 2px;
 	background: var(--color-5-dullgray);
@@ -34,24 +34,24 @@
 		color: var(--color-f-white);
 	}
 
-	&.emphasized {
-		background: var(--color-accent);
-		color: var(--color-f-white);
-
-		&:hover {
-			background: var(--color-accent-hover);
-		}
-
-		&.disabled {
-			background: var(--color-accent-disabled);
-		}
-	}
-
 	&.disabled {
 		background: var(--color-4-dimgray);
 		color: var(--color-8-uppergray);
 	}
 
+	&.emphasized {
+		background: var(--color-e-nearwhite);
+		color: var(--color-2-mildblack);
+
+		&:hover {
+			background: var(--color-f-white);
+		}
+
+		&.disabled {
+			background: var(--color-8-uppergray);
+		}
+	}
+
 	& + .text-button {
 		margin-left: 8px;
 	}
diff --git a/frontend/src/components/widgets/groups/WidgetSection.vue b/frontend/src/components/widgets/groups/WidgetSection.vue
index 85c632f2cc..7da0fe00d2 100644
--- a/frontend/src/components/widgets/groups/WidgetSection.vue
+++ b/frontend/src/components/widgets/groups/WidgetSection.vue
@@ -1,7 +1,7 @@
 <!-- TODO: Implement collapsable sections with properties system -->
 <template>
 	<LayoutCol class="widget-section">
-		<button class="header" @click.stop="() => (expanded = !expanded)">
+		<button class="header" @click.stop="() => (expanded = !expanded)" tabindex="0">
 			<div class="expand-arrow" :class="{ expanded }"></div>
 			<Separator :type="'Related'" />
 			<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 50283ff9ed..a9cd08cc19 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue
@@ -1,9 +1,16 @@
 <template>
 	<LayoutRow class="checkbox-input">
-		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
-		<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
+		<input
+			type="checkbox"
+			:id="`checkbox-input-${id}`"
+			:checked="checked"
+			@change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)"
+			:disabled="disabled"
+			:tabindex="disabled ? -1 : 0"
+		/>
+		<label :class="{ disabled, checked }" :for="`checkbox-input-${id}`" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
 			<LayoutRow class="checkbox-box">
-				<IconLabel :icon="icon" />
+				<IconLabel :icon="displayIcon" />
 			</LayoutRow>
 		</label>
 	</LayoutRow>
@@ -15,9 +22,14 @@
 	align-items: center;
 
 	input {
-		display: none;
+		// We can't use `display: none` because it must be visible to work as a tabbale input that accepts a space bar actuation
+		width: 0;
+		height: 0;
+		margin: 0;
+		opacity: 0;
 	}
 
+	// Unchecked
 	label {
 		display: flex;
 		height: 16px;
@@ -26,31 +38,44 @@
 
 		.checkbox-box {
 			flex: 0 0 auto;
-			background: var(--color-e-nearwhite);
+			background: var(--color-5-dullgray);
 			padding: 2px;
 			border-radius: 2px;
 
+			.icon-label {
+				fill: var(--color-8-uppergray);
+			}
+		}
+
+		// Hovered
+		&:hover .checkbox-box {
+			background: var(--color-6-lowergray);
+		}
+
+		// Disabled
+		&.disabled .checkbox-box {
+			background: var(--color-4-dimgray);
+		}
+	}
+
+	// Checked
+	input:checked + label {
+		.checkbox-box {
+			background: var(--color-e-nearwhite);
+
 			.icon-label {
 				fill: var(--color-2-mildblack);
 			}
 		}
 
+		// Hovered
 		&:hover .checkbox-box {
 			background: var(--color-f-white);
 		}
-	}
 
-	input:checked + label {
-		.checkbox-box {
-			background: var(--color-accent);
-
-			.icon-label {
-				fill: var(--color-f-white);
-			}
-		}
-
-		&:hover .checkbox-box {
-			background: var(--color-accent-hover);
+		// Hovered
+		&.disabled .checkbox-box {
+			background: var(--color-8-uppergray);
 		}
 	}
 }
@@ -68,6 +93,7 @@ export default defineComponent({
 	emits: ["update:checked"],
 	props: {
 		checked: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
@@ -76,6 +102,13 @@ export default defineComponent({
 			id: `${Math.random()}`.substring(2),
 		};
 	},
+	computed: {
+		displayIcon(): IconName {
+			if (!this.checked && this.icon === "Checkmark") return "Empty12px";
+
+			return this.icon;
+		},
+	},
 	methods: {
 		isChecked() {
 			return this.checked;
diff --git a/frontend/src/components/widgets/inputs/ColorInput.vue b/frontend/src/components/widgets/inputs/ColorInput.vue
index d158be6ff4..66879d01b5 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.vue
+++ b/frontend/src/components/widgets/inputs/ColorInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="color-input" :title="tooltip">
-		<button :class="{ none: value.none }" :style="{ '--color': value.toHexOptionalAlpha() }" @click="() => $emit('update:open', true)" data-floating-menu-spawner>
+		<button :class="{ none: value.none }" :style="{ '--chosen-color': value.toHexOptionalAlpha() }" @click="() => $emit('update:open', true)" tabindex="0" data-floating-menu-spawner>
 			<TextLabel :bold="true" class="chip" v-if="chip">{{ chip }}</TextLabel>
 		</button>
 		<ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" />
@@ -11,14 +11,13 @@
 .color-input {
 	box-sizing: border-box;
 	position: relative;
-	border: 1px solid var(--color-7-middlegray);
+	border: 1px solid var(--color-5-dullgray);
 	border-radius: 2px;
 	padding: 1px;
 
 	> button {
 		position: relative;
 		overflow: hidden;
-		outline: none;
 		border: none;
 		padding: 0;
 		margin: 0;
@@ -34,9 +33,9 @@
 			padding: 2px;
 			top: -2px;
 			left: -2px;
-			background: linear-gradient(var(--color), var(--color)), var(--transparent-checkered-background);
-			background-size: var(--transparent-checkered-background-size);
-			background-position: var(--transparent-checkered-background-position);
+			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 {
@@ -62,6 +61,10 @@
 		}
 	}
 
+	&.color-input.color-input > button {
+		outline-offset: 0;
+	}
+
 	> .floating-menu {
 		left: 50%;
 		bottom: 0;
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 0e91c55418..597f67f406 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -8,7 +8,7 @@
 			@click="() => !disabled && (open = true)"
 			@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
 			@keydown="(e: KeyboardEvent) => keydown(e)"
-			tabindex="0"
+			:tabindex="disabled ? -1 : 0"
 			data-floating-menu-spawner
 		>
 			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
diff --git a/frontend/src/components/widgets/inputs/FieldInput.vue b/frontend/src/components/widgets/inputs/FieldInput.vue
index 61f368ecba..ce6589a509 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.vue
+++ b/frontend/src/components/widgets/inputs/FieldInput.vue
@@ -71,10 +71,15 @@
 		line-height: 18px;
 		margin: 0 8px;
 		padding: 3px 0;
-		outline: none;
+		outline: none; // Ok for input/textarea element
 		border: none;
 		background: none;
 		color: var(--color-e-nearwhite);
+		caret-color: var(--color-e-nearwhite);
+
+		&::selection {
+			background: var(--color-5-dullgray);
+		}
 	}
 
 	input {
diff --git a/frontend/src/components/widgets/inputs/FontInput.vue b/frontend/src/components/widgets/inputs/FontInput.vue
index 5ad731ac58..6199b3f3c8 100644
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -1,6 +1,15 @@
 <template>
 	<LayoutRow class="font-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" :title="tooltip" tabindex="0" @click="toggleOpen" @keydown="keydown" data-floating-menu-spawner>
+		<LayoutRow
+			class="dropdown-box"
+			:class="{ disabled }"
+			:style="{ minWidth: `${minWidth}px` }"
+			:title="tooltip"
+			:tabindex="disabled ? -1 : 0"
+			@click="toggleOpen"
+			@keydown="keydown"
+			data-floating-menu-spawner
+		>
 			<span>{{ activeEntry?.value || "" }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
 		</LayoutRow>
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index f820601c2a..0c55e1f1f6 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -8,7 +8,7 @@
 				class="entry"
 				:class="{ open: entry.ref?.isOpen }"
 				tabindex="0"
-				data-floating-menu-spawner
+				:data-floating-menu-spawner="entry.children && entry.children.length > 0 ? '' : 'no-hover-transfer'"
 			>
 				<IconLabel v-if="entry.icon" :icon="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
diff --git a/frontend/src/components/widgets/inputs/NumberInput.vue b/frontend/src/components/widgets/inputs/NumberInput.vue
index f419d393e5..3177f94950 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.vue
+++ b/frontend/src/components/widgets/inputs/NumberInput.vue
@@ -12,8 +12,8 @@
 		@cancelTextChange="() => onCancelTextChange()"
 		ref="fieldInput"
 	>
-		<button v-if="value !== undefined" class="arrow left" @click="() => onIncrement('Decrease')"></button>
-		<button v-if="value !== undefined" class="arrow right" @click="() => onIncrement('Increase')"></button>
+		<button v-if="value !== undefined" class="arrow left" @click="() => onIncrement('Decrease')" tabindex="-1"></button>
+		<button v-if="value !== undefined" class="arrow right" @click="() => onIncrement('Increase')" tabindex="-1"></button>
 	</FieldInput>
 </template>
 
@@ -31,7 +31,6 @@
 		position: absolute;
 		top: 0;
 		padding: 9px 0;
-		outline: none;
 		border: none;
 		background: rgba(var(--color-1-nearblack-rgb), 0.75);
 
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.vue b/frontend/src/components/widgets/inputs/OptionalInput.vue
index a18ded062e..a7bb878fd4 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.vue
+++ b/frontend/src/components/widgets/inputs/OptionalInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="optional-input">
-		<CheckboxInput :checked="checked" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
+		<CheckboxInput :checked="checked" :disabled="disabled" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
 	</LayoutRow>
 </template>
 
@@ -14,22 +14,9 @@
 		white-space: nowrap;
 		width: 24px;
 		height: 24px;
-		border: 1px solid var(--color-7-middlegray);
+		border: 1px solid var(--color-5-dullgray);
 		border-radius: 2px 0 0 2px;
 		box-sizing: border-box;
-
-		&:hover {
-			background: var(--color-6-lowergray);
-		}
-	}
-
-	input:checked + label {
-		border: 1px solid var(--color-accent);
-
-		&:hover {
-			border: 1px solid var(--color-accent-hover);
-			background: none;
-		}
 	}
 }
 </style>
@@ -46,6 +33,7 @@ export default defineComponent({
 	emits: ["update:checked"],
 	props: {
 		checked: { type: Boolean as PropType<boolean>, required: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
 	},
diff --git a/frontend/src/components/widgets/inputs/RadioInput.vue b/frontend/src/components/widgets/inputs/RadioInput.vue
index cb254d353c..3533ba0687 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.vue
+++ b/frontend/src/components/widgets/inputs/RadioInput.vue
@@ -1,6 +1,13 @@
 <template>
 	<LayoutRow class="radio-input">
-		<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="() => handleEntryClick(entry)" :title="entry.tooltip">
+		<button
+			:class="{ active: index === selectedIndex }"
+			v-for="(entry, index) in entries"
+			:key="index"
+			@click="() => handleEntryClick(entry)"
+			:title="entry.tooltip"
+			:tabindex="index === selectedIndex ? -1 : 0"
+		>
 			<IconLabel v-if="entry.icon" :icon="entry.icon" />
 			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
 		</button>
@@ -14,7 +21,6 @@
 		fill: var(--color-e-nearwhite);
 		height: 24px;
 		padding: 0 4px;
-		outline: none;
 		border: none;
 		display: flex;
 		align-items: center;
@@ -29,11 +35,11 @@
 		}
 
 		&.active {
-			background: var(--color-accent);
-			color: var(--color-f-white);
+			background: var(--color-e-nearwhite);
+			color: var(--color-2-mildblack);
 
 			svg {
-				fill: var(--color-f-white);
+				fill: var(--color-2-mildblack);
 			}
 		}
 
diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.vue b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
index 915d9d3d07..f8282236f6 100644
--- a/frontend/src/components/widgets/inputs/SwatchPairInput.vue
+++ b/frontend/src/components/widgets/inputs/SwatchPairInput.vue
@@ -1,20 +1,18 @@
 <template>
 	<LayoutCol class="swatch-pair">
-		<LayoutRow class="secondary swatch">
-			<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button>
-			<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
-		</LayoutRow>
 		<LayoutRow class="primary swatch">
-			<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button>
+			<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
 			<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
 		</LayoutRow>
+		<LayoutRow class="secondary swatch">
+			<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
+			<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
+		</LayoutRow>
 	</LayoutCol>
 </template>
 
 <style lang="scss">
 .swatch-pair {
-	// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
-	flex-direction: column-reverse;
 	flex: 0 0 auto;
 
 	.swatch {
@@ -28,15 +26,14 @@
 			width: 100%;
 			height: 100%;
 			border-radius: 50%;
-			border: 2px var(--color-7-middlegray) solid;
+			border: 2px var(--color-5-dullgray) solid;
 			box-shadow: 0 0 0 2px var(--color-3-darkgray);
 			margin: 0;
 			padding: 0;
 			box-sizing: border-box;
-			outline: none;
-			background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--transparent-checkered-background);
-			background-size: var(--transparent-checkered-background-size);
-			background-position: var(--transparent-checkered-background-position);
+			background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
+			background-size: var(--color-transparent-checkered-background-size);
+			background-position: var(--color-transparent-checkered-background-position);
 			overflow: hidden;
 		}
 
@@ -47,6 +44,7 @@
 
 		&.primary {
 			margin-bottom: -8px;
+			z-index: 1;
 		}
 	}
 }
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.vue b/frontend/src/components/widgets/labels/UserInputLabel.vue
index 8f97133a0c..d29fce3e04 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.vue
+++ b/frontend/src/components/widgets/labels/UserInputLabel.vue
@@ -51,7 +51,7 @@
 		box-sizing: border-box;
 		border: 1px solid;
 		border-radius: 4px;
-		border-color: var(--color-7-middlegray);
+		border-color: var(--color-5-dullgray);
 		color: var(--color-e-nearwhite);
 
 		&.width-1 {
@@ -85,7 +85,7 @@
 		}
 
 		.dim {
-			fill: var(--color-7-middlegray);
+			fill: var(--color-8-uppergray);
 		}
 	}
 
@@ -93,9 +93,9 @@
 		margin-left: 4px;
 	}
 
-	.floating-menu-content & {
+	.floating-menu-content .row > & {
 		.input-key {
-			border-color: var(--color-4-dimgray);
+			border-color: var(--color-3-darkgray);
 			color: var(--color-8-uppergray);
 		}
 
@@ -106,20 +106,13 @@
 		}
 
 		.input-mouse .dim {
-			fill: var(--color-4-dimgray);
+			fill: var(--color-3-darkgray);
 		}
 	}
 
 	.floating-menu-content .row:hover > & {
 		.input-key {
 			border-color: var(--color-7-middlegray);
-			color: var(--color-9-palegray);
-		}
-
-		.input-key .icon-label svg,
-		&.keyboard-lock-notice.keyboard-lock-notice svg,
-		.input-mouse .bright {
-			fill: var(--color-9-palegray);
 		}
 
 		.input-mouse .dim {
diff --git a/frontend/src/components/widgets/metrics/PersistentScrollbar.vue b/frontend/src/components/widgets/metrics/PersistentScrollbar.vue
index 41b6b1e8e2..435abd7894 100644
--- a/frontend/src/components/widgets/metrics/PersistentScrollbar.vue
+++ b/frontend/src/components/widgets/metrics/PersistentScrollbar.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
-		<button class="arrow decrease" @pointerdown="() => changePosition(-50)"></button>
+		<button class="arrow decrease" @pointerdown="() => changePosition(-50)" tabindex="-1"></button>
 		<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
 			<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div>
 		</div>
-		<button class="arrow increase" @click="() => changePosition(50)"></button>
+		<button class="arrow increase" @click="() => changePosition(50)" tabindex="-1"></button>
 	</div>
 </template>
 
@@ -16,7 +16,6 @@
 	.arrow {
 		flex: 0 0 auto;
 		background: none;
-		outline: none;
 		border: none;
 		border-style: solid;
 		width: 0;
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 840ece230d..19f020ba7b 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -43,11 +43,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 		{ target: window, eventName: "wheel", action: (e: WheelEvent): void => onWheelScroll(e), options: { passive: false } },
 		{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent): void => onModifyInputField(e) },
 		{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent): void => onPaste(e) },
-		{
-			target: app as EventListenerTarget,
-			eventName: "blur",
-			action: (): void => blurApp(),
-		},
+		{ target: app as EventListenerTarget, eventName: "blur", action: (): void => blurApp() },
 	];
 
 	// Event bindings
diff --git a/frontend/src/utility-functions/icons.ts b/frontend/src/utility-functions/icons.ts
index 5552ce6929..ae76c007a3 100644
--- a/frontend/src/utility-functions/icons.ts
+++ b/frontend/src/utility-functions/icons.ts
@@ -11,6 +11,7 @@ const GRAPHICS = {
 import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg";
 import CloseX from "@/../assets/icon-12px-solid/close-x.svg";
 import DropdownArrow from "@/../assets/icon-12px-solid/dropdown-arrow.svg";
+import Empty12px from "@/../assets/icon-12px-solid/empty-12px.svg";
 import FullscreenEnter from "@/../assets/icon-12px-solid/fullscreen-enter.svg";
 import FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg";
 import Grid from "@/../assets/icon-12px-solid/grid.svg";
@@ -43,6 +44,7 @@ const SOLID_12PX = {
 	Checkmark: { component: Checkmark, size: 12 },
 	CloseX: { component: CloseX, size: 12 },
 	DropdownArrow: { component: DropdownArrow, size: 12 },
+	Empty12px: { component: Empty12px, size: 12 },
 	FullscreenEnter: { component: FullscreenEnter, size: 12 },
 	FullscreenExit: { component: FullscreenExit, size: 12 },
 	Grid: { component: Grid, size: 12 },
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
index e203716c27..739cd13a6f 100644
--- a/frontend/src/wasm-communication/messages.ts
+++ b/frontend/src/wasm-communication/messages.ts
@@ -708,6 +708,8 @@ export abstract class WidgetProps {
 export class CheckboxInput extends WidgetProps {
 	checked!: boolean;
 
+	disabled!: boolean;
+
 	icon!: IconName;
 
 	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
@@ -833,6 +835,8 @@ export class NumberInput extends WidgetProps {
 export class OptionalInput extends WidgetProps {
 	checked!: boolean;
 
+	disabled!: boolean;
+
 	icon!: IconName;
 
 	@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))