Update UI colors and alignment for consistency with the design mockup (#157)

Closes #111

client/web/src/App.vue

@@ -3,12 +3,38 @@
 </template>
 
 <style lang="scss">
+:root {
+	--color-0-black: #000;
+	--color-1-nearblack: #111;
+	--color-2-mildblack: #222;
+	--color-3-darkgray: #333;
+	--color-4-dimgray: #444;
+	--color-5-dullgray: #555;
+	--color-6-lowergray: #666;
+	--color-7-middlegray: #777;
+	--color-8-uppergray: #888;
+	--color-9-palegray: #999;
+	--color-a-softgray: #aaa;
+	--color-b-lightgray: #bbb;
+	--color-c-brightgray: #ccc;
+	--color-d-mildwhite: #ddd;
+	--color-e-nearwhite: #eee;
+	--color-f-white: #fff;
+	--color-accent: #3194d6;
+	--color-accent-hover: #49a5e2;
+
+	// TODO: Replace with CSS color() function to calculate alpha when browsers support it
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
+	// E6 = 90% alpha
+	--popover-opacity-color-2-mildblack: #222222e6;
+}
+
 html,
 body,
 #app {
 	margin: 0;
 	height: 100%;
-	background: #222;
+	background: var(--color-2-mildblack);
 	user-select: none;
 }
 
@@ -19,7 +45,7 @@ button {
 	font-family: "Source Sans Pro", Arial, sans-serif;
 	font-size: 14px;
 	line-height: 1;
-	color: #ddd;
+	color: var(--color-e-nearwhite);
 }
 
 svg,
@@ -38,6 +64,7 @@ img {
 	p {
 		margin: 0;
 	}
+
 	p {
 		margin-top: 8px;
 	}

client/web/src/components/panels/Document.vue

@@ -4,35 +4,47 @@
 			<div class="left side">
 				<span class="label">Select</span>
 
-				<ItemDivider />
+				<Separator :type="SeparatorType.Section" />
 
 				<IconButton :size="24" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
 				<IconButton :size="24" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
 				<IconButton :size="24" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
+
+				<Separator :type="SeparatorType.Unrelated" />
+
 				<IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
 				<IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
 				<IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
+
+				<Separator :type="SeparatorType.Related" />
+
 				<PopoverButton>
 					<h3>Align</h3>
 					<p>More alignment-related buttons will be here</p>
 				</PopoverButton>
 
-				<ItemDivider />
+				<Separator :type="SeparatorType.Section" />
 
 				<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
 				<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
+
+				<Separator :type="SeparatorType.Related" />
+
 				<PopoverButton>
 					<h3>Flip</h3>
 					<p>More flip-related buttons will be here</p>
 				</PopoverButton>
 
-				<ItemDivider />
+				<Separator :type="SeparatorType.Section" />
 
 				<IconButton :size="24" title="Boolean Union"><BooleanUnion /></IconButton>
 				<IconButton :size="24" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
 				<IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
 				<IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
 				<IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
+
+				<Separator :type="SeparatorType.Related" />
+
 				<PopoverButton>
 					<h3>Boolean</h3>
 					<p>More boolean-related buttons will be here</p>
@@ -50,12 +62,15 @@
 					</PopoverButton>
 				</RadioInput>
 
-				<ItemDivider />
+				<Separator :type="SeparatorType.Section" />
 
 				<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
 				<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
 				<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
-				<NumberInput />
+
+				<Separator :type="SeparatorType.Related" />
+
+				<NumberInput :value="25" :unit="`%`" />
 			</div>
 		</LayoutRow>
 		<LayoutRow :class="'shelf-and-viewport'">
@@ -66,13 +81,13 @@
 					<ShelfItem title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')"><NavigateTool /></ShelfItem>
 					<ShelfItem title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')"><EyedropperTool /></ShelfItem>
 
-					<ItemDivider horizontal />
+					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
 					<ShelfItem title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')"><TextTool /></ShelfItem>
 					<ShelfItem title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')"><FillTool /></ShelfItem>
 					<ShelfItem title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')"><GradientTool /></ShelfItem>
 
-					<ItemDivider horizontal />
+					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
 					<ShelfItem title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')"><BrushTool /></ShelfItem>
 					<ShelfItem title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')"><HealTool /></ShelfItem>
@@ -81,7 +96,7 @@
 					<ShelfItem title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')"><BlurSharpenTool /></ShelfItem>
 					<ShelfItem title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')"><RelightTool /></ShelfItem>
 
-					<ItemDivider horizontal />
+					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
 					<ShelfItem title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')"><PathTool /></ShelfItem>
 					<ShelfItem title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')"><PenTool /></ShelfItem>
@@ -116,7 +131,7 @@
 			flex: 0 0 auto;
 			display: flex;
 			align-items: center;
-			margin: 0 8px;
+			margin: 0 4px;
 
 			.label {
 				white-space: nowrap;
@@ -134,7 +149,7 @@
 			flex: 1 1 100%;
 
 			.canvas {
-				background: #111;
+				background: var(--color-1-nearblack);
 				width: 100%;
 				height: 100%;
 
@@ -146,11 +161,6 @@
 		}
 	}
 }
-
-// The `where` pseduo-class does not contribtue to specificity
-:where(.document .options-bar .side > :not(:first-child)) {
-	margin-left: 8px;
-}
 </style>
 
 <script lang="ts">
@@ -161,7 +171,7 @@ import LayoutCol from "../layout/LayoutCol.vue";
 import WorkingColors from "../widgets/WorkingColors.vue";
 import { PopoverDirection } from "../widgets/overlays/Popover.vue";
 import ShelfItem from "../widgets/ShelfItem.vue";
-import ItemDivider from "../widgets/ItemDivider.vue";
+import Separator, { SeparatorDirection, SeparatorType } from "../widgets/Separator.vue";
 import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton from "../widgets/buttons/PopoverButton.vue";
 import RadioInput from "../widgets/inputs/RadioInput.vue";
@@ -215,7 +225,7 @@ export default defineComponent({
 		LayoutCol,
 		WorkingColors,
 		ShelfItem,
-		ItemDivider,
+		Separator,
 		IconButton,
 		PopoverButton,
 		RadioInput,
@@ -318,6 +328,8 @@ export default defineComponent({
 			viewportSvg: "",
 			activeTool: "Select",
 			PopoverDirection,
+			SeparatorDirection,
+			SeparatorType,
 		};
 	},
 });

client/web/src/components/panels/LayerTree.vue

@@ -1,8 +1,10 @@
 <template>
 	<LayoutCol :class="'layer-tree-panel'">
 		<LayoutRow :class="'options-bar'">
-			<NumberInput />
+			<NumberInput :value="100" :unit="`%`" />
-			<NumberInput />
+
+			<Separator :type="SeparatorType.Related" />
+
 			<PopoverButton>
 				<h3>Compositing Options</h3>
 				<p>More blend and compositing options will be here</p>
@@ -36,8 +38,12 @@
 .layer-tree-panel {
 	.options-bar {
 		height: 32px;
-		margin: 0 8px;
+		margin: 0 4px;
 		align-items: center;
+
+		.number-input {
+			flex: 1 1 100%;
+		}
 	}
 
 	.layer-row {
@@ -49,7 +55,7 @@
 		.layer {
 			display: flex;
 			align-items: center;
-			background: #555;
+			background: var(--color-5-dullgray);
 			border-radius: 4px;
 			width: 100%;
 			height: 100%;
@@ -79,6 +85,7 @@ import { defineComponent } from "vue";
 import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
+import Separator, { SeparatorType } from "../widgets/Separator.vue";
 import NumberInput from "../widgets/inputs/NumberInput.vue";
 import PopoverButton from "../widgets/buttons/PopoverButton.vue";
 import { PopoverDirection } from "../widgets/overlays/Popover.vue";
@@ -94,6 +101,7 @@ export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
+		Separator,
 		PopoverButton,
 		NumberInput,
 		IconButton,
@@ -127,6 +135,7 @@ export default defineComponent({
 	data() {
 		return {
 			PopoverDirection,
+			SeparatorType,
 			layers: [] as Array<LayerPanelEntry>,
 		};
 	},

client/web/src/components/popovers/ColorPicker.vue

@@ -53,8 +53,8 @@
 			display: block;
 			width: 100%;
 			height: 100%;
-			background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
+			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(#fff, #fff);
+				linear-gradient(#ffffff, #ffffff);
 			background-size: 16px 16px;
 			background-position: 0 0, 8px 8px;
 			position: relative;
@@ -97,7 +97,7 @@
 			left: 0;
 			border-style: solid;
 			border-width: 4px 0 4px 4px;
-			border-color: transparent transparent transparent black;
+			border-color: transparent transparent transparent #000000;
 		}
 
 		&::after {
@@ -107,7 +107,7 @@
 			right: 0;
 			border-style: solid;
 			border-width: 4px 4px 4px 0;
-			border-color: transparent black transparent transparent;
+			border-color: transparent #000000 transparent transparent;
 		}
 	}
 }

client/web/src/components/widgets/ItemDivider.vue

@@ -1,50 +0,0 @@
-<template>
-	<div class="item-spacer" :class="{ horizontal: horizontal }">
-		<div></div>
-	</div>
-</template>
-
-<style lang="scss">
-.item-spacer {
-	margin-left: 0;
-
-	& + * {
-		margin-left: 0;
-	}
-
-	&:not(.horizontal) {
-		height: 100%;
-		padding: 0 8px;
-
-		div {
-			height: calc(100% - 8px);
-			width: 1px;
-			margin: 4px 0;
-			background: #888;
-		}
-	}
-
-	&.horizontal {
-		width: 100%;
-		padding: 8px 0;
-
-		div {
-			height: 1px;
-			width: calc(100% - 8px);
-			margin: 0 4px;
-			background: #888;
-		}
-	}
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-	components: {},
-	props: {
-		horizontal: { type: Boolean, default: false },
-	},
-});
-</script>

client/web/src/components/widgets/Separator.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
+		<div v-if="type === SeparatorType.Section"></div>
+	</div>
+</template>
+
+<style lang="scss">
+.separator {
+	&.vertical {
+		&.related {
+			margin-top: 4px;
+		}
+
+		&.unrelated {
+			margin-top: 8px;
+		}
+
+		&.section {
+			width: 100%;
+			margin: 8px 0;
+
+			div {
+				height: 1px;
+				width: calc(100% - 8px);
+				margin: 0 4px;
+				background: var(--color-7-middlegray);
+			}
+		}
+	}
+
+	&.horizontal {
+		&.related {
+			margin-left: 4px;
+		}
+
+		&.unrelated {
+			margin-left: 8px;
+		}
+
+		&.section {
+			height: 100%;
+			margin: 0 8px;
+
+			div {
+				height: calc(100% - 8px);
+				width: 1px;
+				margin: 4px 0;
+				background: var(--color-7-middlegray);
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export enum SeparatorDirection {
+	"Horizontal" = "Horizontal",
+	"Vertical" = "Vertical",
+}
+
+export enum SeparatorType {
+	"Related" = "Related",
+	"Unrelated" = "Unrelated",
+	"Section" = "Section",
+}
+
+export default defineComponent({
+	components: {},
+	props: {
+		direction: { type: String, default: SeparatorDirection.Horizontal },
+		type: { type: String, default: SeparatorType.Unrelated },
+	},
+	data() {
+		return {
+			SeparatorDirection,
+			SeparatorType,
+		};
+	},
+});
+</script>

client/web/src/components/widgets/ShelfItem.vue

@@ -10,11 +10,11 @@
 	border-radius: 2px;
 
 	&:hover {
-		background: #666;
+		background: var(--color-6-lowergray);
 	}
 
 	&.active {
-		background: #3194d6;
+		background: var(--color-accent);
 	}
 
 	svg {

client/web/src/components/widgets/buttons/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="icon-button" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
+	<button class="icon-button" :class="`size-${String(size)}`">
 		<slot></slot>
 	</button>
 </template>
@@ -14,7 +14,7 @@
 	border-radius: 2px;
 	background: none;
 	vertical-align: top;
-	fill: #ddd;
+	fill: var(--color-e-nearwhite);
 	width: 16px;
 	height: 16px;
 
@@ -23,14 +23,10 @@
 		margin-left: 0;
 	}
 
-	&.gap-after + .icon-button {
-		margin-left: 8px;
-	}
-
 	&:hover {
-		background: #666;
+		background: var(--color-6-lowergray);
-		color: white;
+		color: var(--color-f-white);
-		fill: white;
+		fill: var(--color-f-white);
 	}
 
 	&.size-10 {

client/web/src/components/widgets/buttons/PopoverButton.vue

@@ -15,7 +15,7 @@
 	position: relative;
 	width: 16px;
 	height: 24px;
-	margin: 2px 4px;
+	flex: 0 0 auto;
 
 	.popover {
 		left: 50%;
@@ -29,12 +29,12 @@
 		border: none;
 		border-radius: 2px;
 		vertical-align: top;
-		background: #111;
+		background: var(--color-1-nearblack);
-		fill: #ddd;
+		fill: var(--color-e-nearwhite);
 
 		&:hover {
-			background: #666;
+			background: var(--color-6-lowergray);
-			fill: #fff;
+			fill: var(--color-f-white);
 		}
 	}
 }

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -20,18 +20,18 @@
 		padding: 0 8px;
 
 		svg {
-			fill: #ddd;
+			fill: var(--color-e-nearwhite);
 		}
 
 		&:hover {
-			background: #666;
+			background: var(--color-6-lowergray);
 
 			svg {
-				fill: #fff;
+				fill: var(--color-f-white);
 			}
 
 			span {
-				color: #fff;
+				color: var(--color-f-white);
 			}
 		}
 	}

client/web/src/components/widgets/inputs/NumberInput.vue

@@ -2,7 +2,7 @@
 	<div class="number-input">
 		<button class="arrow left"></button>
 		<button class="arrow right"></button>
-		<input type="text" spellcheck="false" value="25%" />
+		<input type="text" spellcheck="false" :value="`${value}${unit}`" />
 	</div>
 </template>
 
@@ -12,7 +12,7 @@
 	height: 24px;
 	position: relative;
 	border-radius: 2px;
-	background: #111;
+	background: var(--color-1-nearblack);
 	overflow: hidden;
 
 	input {
@@ -23,13 +23,13 @@
 		background: none;
 		padding: 0;
 		line-height: 24px;
-		color: #ddd;
+		color: var(--color-e-nearwhite);
 		font-size: inherit;
 		text-align: center;
 		font-family: inherit;
 
 		&::selection {
-			background: #3194d6;
+			background: var(--color-accent);
 		}
 	}
 
@@ -46,14 +46,14 @@
 		padding: 9px 0;
 
 		&:hover {
-			background: #666;
+			background: var(--color-6-lowergray);
 
 			&.right::before {
-				border-color: transparent transparent transparent #fff;
+				border-color: transparent transparent transparent var(--color-f-white);
 			}
 
 			&.left::after {
-				border-color: transparent #fff transparent transparent;
+				border-color: transparent var(--color-f-white) transparent transparent;
 			}
 		}
 
@@ -68,7 +68,7 @@
 				height: 0;
 				border-style: solid;
 				border-width: 3px 0 3px 3px;
-				border-color: transparent transparent transparent #ddd;
+				border-color: transparent transparent transparent var(--color-e-nearwhite);
 				display: block;
 			}
 		}
@@ -84,7 +84,7 @@
 				height: 0;
 				border-style: solid;
 				border-width: 3px 3px 3px 0;
-				border-color: transparent #ddd transparent transparent;
+				border-color: transparent var(--color-e-nearwhite) transparent transparent;
 				display: block;
 			}
 		}
@@ -97,6 +97,9 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
 	components: {},
-	props: {},
+	props: {
+		value: { type: Number, required: true },
+		unit: { type: String, default: "" },
+	},
 });
 </script>

client/web/src/components/widgets/inputs/RadioInput.vue

@@ -29,17 +29,17 @@
 		}
 	}
 
-	button {
+	& > button {
-		background: #555;
+		background: var(--color-5-dullgray);
-		fill: #ddd;
+		fill: var(--color-e-nearwhite);
 
 		&:hover {
-			background: #666;
+			background: var(--color-6-lowergray);
 		}
 
 		&.active {
-			background: #3194d6;
+			background: var(--color-accent);
-			fill: #fff;
+			fill: var(--color-f-white);
 		}
 	}
 }

client/web/src/components/widgets/inputs/SwatchPairInput.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="swatch-pair">
 		<div class="secondary swatch">
-			<button @click="clickSecondarySwatch" style="background: white"></button>
+			<button @click="clickSecondarySwatch" style="background: #ffffff"></button>
 			<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
 				<ColorPicker />
 			</Popover>
 		</div>
 		<div class="primary swatch">
-			<button @click="clickPrimarySwatch" style="background: black"></button>
+			<button @click="clickPrimarySwatch" style="background: #000000"></button>
 			<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
 				<ColorPicker />
 			</Popover>
@@ -24,15 +24,15 @@
 	.swatch {
 		width: 28px;
 		height: 28px;
-		margin: 2px;
+		margin: 0 2px;
 		position: relative;
 
 		button {
 			width: 100%;
 			height: 100%;
 			border-radius: 50%;
-			border: 2px #888 solid;
+			border: 2px var(--color-7-middlegray) solid;
-			box-shadow: 0 0 0 2px #333;
+			box-shadow: 0 0 0 2px var(--color-3-darkgray);
 			margin: 0;
 			padding: 0;
 			box-sizing: border-box;

client/web/src/components/widgets/labels/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
+	<div class="icon" :class="`size-${String(size)}`">
 		<slot></slot>
 	</div>
 </template>
@@ -8,14 +8,11 @@
 .icon {
 	display: inline-block;
 	flex: 0 0 auto;
-	fill: #ddd;
+	fill: var(--color-e-nearwhite);
 	vertical-align: top;
 	width: 16px;
 	height: 16px;
-
+	margin-left: 0;
-	&:not(.gap-after) + .icon {
-		margin-left: 0;
-	}
 
 	&.size-10 {
 		width: 10px;

client/web/src/components/widgets/labels/UserInputLabel.vue

@@ -38,12 +38,12 @@
 		font-family: "Inconsolata", monospace;
 		font-weight: bold;
 		text-align: center;
-		color: #111;
+		color: var(--color-2-mildblack);
-		background: #ddd;
+		background: var(--color-e-nearwhite);
 		border: 1px;
 		box-sizing: border-box;
 		border-style: solid;
-		border-color: #888;
+		border-color: var(--color-7-middlegray);
 		border-radius: 4px;
 		height: 16px;
 		line-height: 16px;
@@ -71,11 +71,11 @@
 
 	.input-mouse {
 		.bright {
-			fill: #ddd;
+			fill: var(--color-e-nearwhite);
 		}
 
 		.dim {
-			fill: #888;
+			fill: var(--color-7-middlegray);
 		}
 
 		svg {

client/web/src/components/widgets/overlays/Popover.vue

@@ -10,6 +10,8 @@
 </template>
 
 <style lang="scss">
+@use "sass:color";
+
 .popover {
 	position: absolute;
 	width: 0;
@@ -35,28 +37,28 @@
 
 	.top > & {
 		border-width: 8px 6px 0 6px;
-		border-color: #222222e6 transparent transparent transparent;
+		border-color: var(--popover-opacity-color-2-mildblack) transparent transparent transparent;
 		margin-left: -6px;
 		margin-bottom: 2px;
 	}
 
 	.bottom > & {
 		border-width: 0 6px 8px 6px;
-		border-color: transparent transparent #222222e6 transparent;
+		border-color: transparent transparent var(--popover-opacity-color-2-mildblack) transparent;
 		margin-left: -6px;
 		margin-top: 2px;
 	}
 
 	.left > & {
 		border-width: 6px 0 6px 8px;
-		border-color: transparent transparent transparent #222222e6;
+		border-color: transparent transparent transparent var(--popover-opacity-color-2-mildblack);
 		margin-top: -6px;
 		margin-right: 2px;
 	}
 
 	.right > & {
 		border-width: 6px 8px 6px 0;
-		border-color: transparent #222222e6 transparent transparent;
+		border-color: transparent var(--popover-opacity-color-2-mildblack) transparent transparent;
 		margin-top: -6px;
 		margin-left: 2px;
 	}
@@ -86,10 +88,10 @@
 	}
 
 	.popover-content {
-		background: #222222e6;
+		background: var(--popover-opacity-color-2-mildblack);
-		box-shadow: #000 0 0 4px;
+		box-shadow: var(--color-0-black) 0 0 4px;
 		border-radius: 4px;
-		color: #eee;
+		color: var(--color-e-nearwhite);
 		font-size: inherit;
 		padding: 8px;
 		z-index: 0;

client/web/src/components/window/MainWindow.vue

@@ -1,12 +1,12 @@
 <template>
 	<LayoutCol class="main-window">
-		<LayoutRow :class="'title-bar'">
+		<LayoutRow :class="'title-bar-row'">
 			<TitleBar :platform="platform" :maximized="maximized" />
 		</LayoutRow>
-		<LayoutRow :class="'workspace'">
+		<LayoutRow :class="'workspace-row'">
 			<Workspace />
 		</LayoutRow>
-		<LayoutRow :class="'status-bar'">
+		<LayoutRow :class="'status-bar-row'">
 			<StatusBar />
 		</LayoutRow>
 	</LayoutCol>
@@ -17,17 +17,17 @@
 	height: 100%;
 }
 
-.title-bar {
+.title-bar-row {
 	height: 28px;
 	flex: 0 0 auto;
 }
 
-.workspace {
+.workspace-row {
 	flex: 1 1 100%;
 	height: 100%;
 }
 
-.status-bar {
+.status-bar-row {
 	height: 24px;
 	flex: 0 0 auto;
 }

client/web/src/components/window/status-bar/StatusBar.vue

@@ -1,21 +1,25 @@
 <template>
 	<div class="status-bar">
-		<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
+		<UserInputLabel :inputMouse="'LMBDrag'">Drag Selected</UserInputLabel>
-		<span class="plus">+</span>
+		<Separator :type="SeparatorType.Section" />
-		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
-		<div class="divider"></div>
-		<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
-		<span class="plus">+</span>
-		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
-		<div class="divider"></div>
 		<UserInputLabel :inputKeys="['G']">Grab Selected</UserInputLabel>
 		<UserInputLabel :inputKeys="['R']">Rotate Selected</UserInputLabel>
 		<UserInputLabel :inputKeys="['S']">Scale Selected</UserInputLabel>
-		<div class="divider"></div>
+		<Separator :type="SeparatorType.Section" />
+		<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
+		<span class="plus">+</span>
+		<UserInputLabel :inputKeys="['Ctrl']">Innermost</UserInputLabel>
+		<span class="plus">+</span>
+		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
+		<Separator :type="SeparatorType.Section" />
+		<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
+		<span class="plus">+</span>
+		<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
+		<Separator :type="SeparatorType.Section" />
 		<UserInputLabel :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</UserInputLabel>
 		<span class="plus">+</span>
 		<UserInputLabel :inputKeys="['⇧']">Big Increment Nudge</UserInputLabel>
-		<div class="divider"></div>
+		<Separator :type="SeparatorType.Section" />
 		<UserInputLabel :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
 		<UserInputLabel :inputKeys="['Ctrl', 'D']">Duplicate</UserInputLabel>
 	</div>
@@ -24,33 +28,45 @@
 <style lang="scss">
 .status-bar {
 	display: flex;
-}
 
-.plus {
+	.plus {
-	display: flex;
+		display: flex;
-	align-items: center;
+		align-items: center;
-	font-weight: bold;
+		font-weight: bold;
-}
+	}
 
-.divider {
+	.user-input-label + .user-input-label {
-	width: 1px;
+		margin-left: 0;
-	height: 16px;
+	}
-	margin: 4px 0;
-	background: #888;
-}
 
-.user-input-label + .user-input-label {
+	.separator.section {
-	margin-left: 0;
+		margin: 0;
+	}
+
+	> :first-child {
+		margin-left: 4px;
+	}
+
+	> :last-child {
+		margin-right: 4px;
+	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import UserInputLabel from "../../widgets/labels/UserInputLabel.vue";
+import Separator, { SeparatorType } from "../../widgets/Separator.vue";
 
 export default defineComponent({
 	components: {
 		UserInputLabel,
+		Separator,
+	},
+	data() {
+		return {
+			SeparatorType,
+		};
 	},
 });
 </script>

client/web/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -20,14 +20,14 @@
 	padding: 0 20px;
 
 	svg {
-		fill: #ddd;
+		fill: var(--color-e-nearwhite);
 	}
 
 	&:hover {
-		background: #666;
+		background: var(--color-6-lowergray);
 
 		svg {
-			fill: #fff;
+			fill: var(--color-f-white);
 		}
 	}
 

client/web/src/components/workspace/Panel.vue

@@ -22,7 +22,7 @@
 
 <style lang="scss">
 .panel {
-	background: #111;
+	background: var(--color-1-nearblack);
 	border-radius: 8px;
 	flex-grow: 1;
 	display: flex;
@@ -35,7 +35,7 @@
 		flex-direction: row;
 
 		&.min-widths .tab-group .tab {
-			min-width: 120px;
+			min-width: 124px;
 			max-width: 360px;
 		}
 
@@ -47,13 +47,13 @@
 
 			.tab {
 				height: 100%;
-				padding: 0 10px;
+				padding: 0 8px;
 				display: flex;
 				align-items: center;
 				position: relative;
 
 				&.active {
-					background: #333;
+					background: var(--color-3-darkgray);
 					border-radius: 8px 8px 0 0;
 					position: relative;
 
@@ -69,13 +69,13 @@
 					&:not(:first-child)::before {
 						left: -16px;
 						border-bottom-right-radius: 8px;
-						box-shadow: 8px 0 0 0 #333;
+						box-shadow: 8px 0 0 0 var(--color-3-darkgray);
 					}
 
 					&::after {
 						right: -16px;
 						border-bottom-left-radius: 8px;
-						box-shadow: -8px 0 0 0 #333;
+						box-shadow: -8px 0 0 0 var(--color-3-darkgray);
 					}
 				}
 
@@ -102,7 +102,7 @@
 						left: -1px;
 						width: 1px;
 						height: 16px;
-						background: #444;
+						background: var(--color-4-dimgray);
 					}
 				}
 
@@ -115,15 +115,19 @@
 						right: -1px;
 						width: 1px;
 						height: 16px;
-						background: #444;
+						background: var(--color-4-dimgray);
 					}
 				}
 			}
 		}
+
+		.popover-button {
+			margin: 2px 4px;
+		}
 	}
 
 	.panel-body {
-		background: #333;
+		background: var(--color-3-darkgray);
 		flex-grow: 1;
 	}
 }

client/web/src/components/workspace/Workspace.vue

@@ -5,21 +5,21 @@
 				:panelType="'Document'"
 				:tabCloseButtons="true"
 				:tabMinWidths="true"
-				:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
+				:tabLabels="['X-35B Over Death Valley*', 'Document 1', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
 				:tabActiveIndex="0"
 			/>
 		</LayoutCol>
 		<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
-			<LayoutRow class="workspace-grid-subdivision">
+			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
 				<Panel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
-			<LayoutRow class="workspace-grid-subdivision">
+			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
 				<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
-			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
+			<LayoutRow class="workspace-grid-subdivision folded">
 				<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
 			</LayoutRow>
 		</LayoutCol>
@@ -29,6 +29,12 @@
 <style lang="scss">
 .workspace-grid-subdivision {
 	min-height: 28px;
+	flex: 1 1 0;
+
+	&.folded {
+		flex-grow: 0;
+		height: 0;
+	}
 }
 
 .workspace-grid-resize-gutter {