Minor UI design style revamp

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

@@ -37,8 +37,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 this
 	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;

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

@@ -237,11 +237,11 @@
 					<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
 
 					{#if entry.shortcut?.keys.length}
-						<UserInputLabel keysWithLabelsGroups={[entry.shortcut.keys]} requiresLock={entry.shortcutRequiresLock} />
+						<UserInputLabel keysWithLabelsGroups={[entry.shortcut.keys]} requiresLock={entry.shortcutRequiresLock} textOnly={true} />
 					{/if}
 
 					{#if entry.children?.length}
-						<div class="submenu-arrow" />
+						<IconLabel class="submenu-arrow" icon="DropdownArrow" />
 					{:else}
 						<div class="no-submenu-arrow" />
 					{/if}
@@ -261,7 +261,7 @@
 
 <style lang="scss" global>
 	.menu-list {
-		.floating-menu-container .floating-menu-content {
+		.floating-menu-container .floating-menu-content.floating-menu-content {
 			padding: 4px 0;
 
 			.separator div {
@@ -278,8 +278,10 @@
 				white-space: nowrap;
 				position: relative;
 				flex: 0 0 auto;
+				border-radius: 2px;
+				margin: 0 4px;
 
-				& > * {
+				> * {
 					flex: 0 0 auto;
 				}
 
@@ -289,42 +291,34 @@
 
 				.no-icon {
 					width: 16px;
+					height: 16px;
 				}
 
 				.entry-label {
 					flex: 1 1 100%;
-					margin-left: 8px;
+					margin: 0 4px;
 				}
 
 				.entry-icon,
 				.no-icon {
-					margin: 0 4px;
-
-					& + .entry-label {
-						margin-left: 0;
-					}
+					margin-left: 4px;
 				}
 
 				.user-input-label {
-					margin-left: 16px;
+					margin-left: 12px;
 				}
 
 				.submenu-arrow {
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-width: 3px 0 3px 6px;
-					border-color: transparent transparent transparent var(--color-e-nearwhite);
+					transform: rotate(270deg);
 				}
 
 				.no-submenu-arrow {
-					width: 6px;
+					width: 12px;
+					height: 12px;
 				}
 
-				.submenu-arrow,
-				.no-submenu-arrow {
-					margin-left: 6px;
-					margin-right: 4px;
+				> .menu-list {
+					margin-right: -4px;
 				}
 
 				&:hover,

frontend/src/components/layout/FloatingMenu.svelte

@@ -412,11 +412,6 @@
 		// Floating menus begin at a z-index of 1000
 		z-index: 1000;
 		--floating-menu-content-offset: 0;
-		--floating-menu-content-border-radius: 4px;
-
-		&.bottom {
-			--floating-menu-content-border-radius: 0 0 4px 4px;
-		}
 
 		.tail {
 			width: 0;
@@ -434,7 +429,7 @@
 			.floating-menu-content {
 				background: rgba(var(--color-2-mildblack-rgb), 0.95);
 				box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px;
-				border-radius: var(--floating-menu-content-border-radius);
+				border-radius: 4px;
 				color: var(--color-e-nearwhite);
 				font-size: inherit;
 				padding: 8px;
@@ -501,7 +496,6 @@
 
 		&.popover {
 			--floating-menu-content-offset: 10px;
-			--floating-menu-content-border-radius: 4px;
 		}
 
 		&.cursor .floating-menu-container .floating-menu-content {

frontend/src/components/panels/Document.svelte

@@ -500,10 +500,6 @@
 					}
 
 					.icon-button:not(.active) {
-						.color-solid {
-							fill: var(--color-f-white);
-						}
-
 						.color-general {
 							fill: var(--color-data-general);
 						}

frontend/src/components/panels/LayerTree.svelte

@@ -4,8 +4,6 @@
 	import { beginDraggingElement } from "@graphite/io-managers/drag";
 	import { platformIsMac } from "@graphite/utility-functions/platform";
 	import {
-		type LayerType,
-		type LayerTypeData,
 		type LayerPanelEntry,
 		defaultWidgetLayout,
 		patchWidgetLayout,
@@ -314,10 +312,6 @@
 			layers = layers;
 		}
 	}
-
-	function getLayerTypeData(layerType: LayerType): LayerTypeData {
-		return layerTypeData(layerType) || { name: "Error", icon: "Info" };
-	}
 </script>
 
 <LayoutCol class="layer-tree" on:dragleave={() => (dragInPanel = false)}>
@@ -359,7 +353,7 @@
 						on:dragstart={(e) => draggable && dragStart(e, listing)}
 						on:click={(e) => selectLayerWithModifiers(e, listing)}
 					>
-						{@const layerType = getLayerTypeData(listing.entry.layerType)}
+						{@const layerType = layerTypeData(listing.entry.layerType)}
 						<LayoutRow class="layer-type-icon">
 							<IconLabel icon={layerType.icon} />
 						</LayoutRow>
@@ -368,7 +362,7 @@
 								data-text-input
 								type="text"
 								value={listing.entry.name}
-								placeholder={"Untitled " + layerType.name}
+								placeholder={`Untitled ${layerType.name}`}
 								disabled={!listing.editingName}
 								on:blur={() => onEditLayerNameDeselect(listing)}
 								on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}

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

@@ -57,12 +57,7 @@
 		}
 
 		&:hover {
-			background: var(--color-6-lowergray);
-			color: var(--color-f-white);
-
-			svg {
-				fill: var(--color-f-white);
-			}
+			background: var(--color-5-dullgray);
 		}
 
 		&.disabled {

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

@@ -49,8 +49,7 @@
 
 			&:hover,
 			&.open {
-				background: var(--color-6-lowergray);
-				fill: var(--color-f-white);
+				background: var(--color-5-dullgray);
 			}
 
 			&.disabled {

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

@@ -13,8 +13,10 @@
 	let open = false;
 
 	export let value: Color;
-	// export let noTransparency = false; // TODO: Rename to allowTransparency, also implement allowNone
-	// export let disabled = false; // TODO: Design and implement
+	// TODO: Implement
+	// export let allowTransparency = false;
+	// export let allowNone = false;
+	// export let disabled = false;
 	export let tooltip: string | undefined = undefined;
 	export let sharpRightCorners = false;
 

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

@@ -114,6 +114,7 @@
 
 			.dropdown-icon {
 				margin: 4px;
+				margin-left: 8px;
 				flex: 0 0 auto;
 
 				& + .dropdown-label {
@@ -122,7 +123,7 @@
 			}
 
 			.dropdown-arrow {
-				margin: 6px 2px;
+				margin: 4px;
 				flex: 0 0 auto;
 			}
 
@@ -139,10 +140,6 @@
 				}
 			}
 
-			&.open {
-				border-radius: 2px 2px 0 0;
-			}
-
 			&.disabled {
 				background: var(--color-2-mildblack);
 

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

@@ -117,7 +117,6 @@
 		position: relative;
 		border-radius: 2px;
 		background: var(--color-1-nearblack);
-		overflow: hidden;
 		flex-direction: row-reverse;
 
 		label {

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

@@ -43,10 +43,6 @@
 			dispatch("value", layerPath);
 		}
 	}
-
-	function getLayerTypeData(layerType: LayerType): LayerTypeData {
-		return layerTypeData(layerType) || { name: "Error", icon: "Info" };
-	}
 </script>
 
 <LayoutRow
@@ -62,8 +58,8 @@
 		<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
 	{:else}
 		{#if layerName !== undefined && layerType}
-			<IconLabel icon={getLayerTypeData(layerType).icon} class="layer-icon" />
-			<TextLabel italic={layerName === ""} class="layer-name">{layerName || getLayerTypeData(layerType).name}</TextLabel>
+			<IconLabel icon={layerTypeData(layerType).icon} class="layer-icon" />
+			<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerTypeData(layerType).name}`}</TextLabel>
 		{:else}
 			<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
 		{/if}
@@ -81,7 +77,7 @@
 
 		.drop-zone {
 			pointer-events: none;
-			border: 1px dashed var(--color-5-dullgray);
+			border: 1px dashed var(--color-4-dimgray);
 			border-radius: 1px;
 			position: absolute;
 			top: 2px;

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

@@ -128,22 +128,11 @@
 				background: none;
 				border: 0;
 				margin: 0;
-
-				svg {
-					fill: var(--color-e-nearwhite);
-				}
+				border-radius: 2px;
 
 				&:hover,
 				&.open {
-					background: var(--color-6-lowergray);
-
-					svg {
-						fill: var(--color-f-white);
-					}
-
-					span {
-						color: var(--color-f-white);
-					}
+					background: var(--color-5-dullgray);
 				}
 			}
 		}

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

@@ -317,18 +317,11 @@
 				margin: 0;
 				padding: 9px 0;
 				border: none;
+				border-radius: 2px;
 				background: rgba(var(--color-1-nearblack-rgb), 0.75);
 
 				&:hover {
-					background: var(--color-6-lowergray);
-
-					&.right::before {
-						border-color: transparent transparent transparent var(--color-f-white);
-					}
-
-					&.left::after {
-						border-color: transparent var(--color-f-white) transparent transparent;
-					}
+					background: var(--color-5-dullgray);
 				}
 
 				&.right {

frontend/src/components/widgets/labels/UserInputLabel.svelte

@@ -36,6 +36,7 @@
 	export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
 	export let mouseMotion: MouseMotion | undefined = undefined;
 	export let requiresLock = false;
+	export let textOnly = false;
 
 	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage(fullscreen.keyboardLockApiSupported);
 
@@ -117,7 +118,7 @@
 {#if displayKeyboardLockNotice}
 	<IconLabel class="user-input-label keyboard-lock-notice" icon="Info" tooltip={keyboardLockInfoMessage} />
 {:else}
-	<LayoutRow class="user-input-label">
+	<LayoutRow class="user-input-label" classes={{ "text-only": textOnly }}>
 		{#each keysWithLabelsGroups as keysWithLabels, groupIndex (groupIndex)}
 			{#if groupIndex > 0}
 				<Separator type="Related" />
@@ -152,56 +153,64 @@
 		align-items: center;
 		white-space: nowrap;
 
-		.input-key,
-		.input-mouse {
-			& + .input-key,
-			& + .input-mouse {
-				margin-left: 2px;
+		&.text-only {
+			.input-key + .input-key::before {
+				content: "+";
 			}
 		}
 
-		.input-key {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			font-family: "Inconsolata", monospace;
-			font-weight: 400;
-			text-align: center;
-			height: 16px;
-			box-sizing: border-box;
-			border: 1px solid;
-			border-radius: 4px;
-			border-color: var(--color-5-dullgray);
-			color: var(--color-e-nearwhite);
-
-			.text-label {
-				// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
-				// so moving it up 1 pixel by using 15px makes them agree.
-				line-height: 15px;
+		&:not(.text-only) {
+			.input-key,
+			.input-mouse {
+				& + .input-key,
+				& + .input-mouse {
+					margin-left: 2px;
+				}
 			}
 
-			&.width-1 {
-				width: 16px;
-			}
+			.input-key {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-family: "Inconsolata", monospace;
+				font-weight: 400;
+				text-align: center;
+				height: 16px;
+				box-sizing: border-box;
+				border: 1px solid;
+				border-radius: 4px;
+				border-color: var(--color-5-dullgray);
+				color: var(--color-e-nearwhite);
 
-			&.width-2 {
-				width: 24px;
-			}
+				.text-label {
+					// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
+					// so moving it up 1 pixel by using 15px makes them agree.
+					line-height: 15px;
+				}
 
-			&.width-3 {
-				width: 32px;
-			}
+				&.width-1 {
+					width: 16px;
+				}
 
-			&.width-4 {
-				width: 40px;
-			}
+				&.width-2 {
+					width: 24px;
+				}
 
-			&.width-5 {
-				width: 48px;
-			}
+				&.width-3 {
+					width: 32px;
+				}
 
-			.icon-label {
-				margin: 1px;
+				&.width-4 {
+					width: 40px;
+				}
+
+				&.width-5 {
+					width: 48px;
+				}
+
+				.icon-label {
+					margin: 1px;
+				}
 			}
 		}
 

frontend/src/components/window/title-bar/WindowButtonsMac.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
-	// export let maximized = false;
+	export let maximized = false;
 </script>
 
 <LayoutRow class="window-buttons-mac">
 	<div class="close" title="Close" />
-	<div class="minimize" title="Minimize" />
+	<div class="minimize" title={maximized ? "Minimize" : "Maximize"} />
 	<div class="zoom" title="Zoom" />
 </LayoutRow>