tldraw 3.16.0-canary.856874107ebd → 3.16.0-canary.887377ec7acc

package/src/lib/ui.css

@@ -1,15 +1,15 @@
 /* @tldraw/ui */
 
 .tl-container {
-	--layer-above: 1;
-	--layer-focused-input: 10;
-	--layer-menu-click-capture: 250;
-	--layer-panels: 300;
-	--layer-menus: 400;
-	--layer-toasts: 650;
-	--layer-cursor: 700;
-	--layer-header-footer: 999;
-	--layer-following-indicator: 1000;
+	--tl-layer-above: 1;
+	--tl-layer-focused-input: 10;
+	--tl-layer-menu-click-capture: 250;
+	--tl-layer-panels: 300;
+	--tl-layer-menus: 400;
+	--tl-layer-toasts: 650;
+	--tl-layer-cursor: 700;
+	--tl-layer-header-footer: 999;
+	--tl-layer-following-indicator: 1000;
 }
 
 /* Button */
@@ -33,23 +33,23 @@
 	text-rendering: optimizeLegibility;
 	font-size: 12px;
 	gap: 0px;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 	z-index: 0;
 }
 
 .tlui-button:disabled {
-	color: var(--color-text-3);
+	color: var(--tl-color-text-3);
 	text-shadow: none;
 	cursor: default;
 }
 
 .tlui-button:disabled .tlui-kbd {
-	color: var(--color-text-3);
+	color: var(--tl-color-text-3);
 }
 
 .tlui-button > * {
 	position: relative;
-	z-index: var(--layer-above);
+	z-index: var(--tl-layer-above);
 }
 
 .tlui-button__label {
@@ -65,7 +65,7 @@
  */
 .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
 	border-radius: 10px;
-	outline: 2px solid var(--color-focus);
+	outline: 2px solid var(--tl-color-focus);
 	outline-offset: -5px;
 }
 .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
@@ -73,7 +73,7 @@
 }
 .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
 	border-radius: 10px;
-	outline: 2px solid var(--color-focus);
+	outline: 2px solid var(--tl-color-focus);
 	outline-offset: -5px;
 }
 
@@ -82,8 +82,8 @@
 	content: '';
 	position: absolute;
 	inset: 4px;
-	border-radius: var(--radius-2);
-	background: var(--color-muted-2);
+	border-radius: var(--tl-radius-2);
+	background: var(--tl-color-muted-2);
 	opacity: 0;
 }
 
@@ -93,18 +93,18 @@
 
 .tlui-button[data-isactive='true']::after,
 .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
-	background: var(--color-hint);
+	background: var(--tl-color-hint);
 	opacity: 1;
 }
 
 .tlui-button[aria-expanded='true'][data-direction='left'] {
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
 	.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 		opacity: 1;
 	}
 
@@ -118,18 +118,18 @@
 }
 
 .tlui-button__icon + .tlui-button__label {
-	margin-left: var(--space-2);
+	margin-left: var(--tl-space-2);
 }
 
 /* Low button  */
 
 .tlui-button__low {
-	border-radius: var(--radius-3);
-	background-color: var(--color-low);
+	border-radius: var(--tl-radius-3);
+	background-color: var(--tl-color-low);
 }
 
 .tlui-button__low::after {
-	background-color: var(--color-muted-2);
+	background-color: var(--tl-color-muted-2);
 	opacity: 0;
 }
 
@@ -142,21 +142,21 @@
 /* Primary / danger buttons */
 
 .tlui-button__primary {
-	color: var(--color-primary);
+	color: var(--tl-color-primary);
 }
 
 .tlui-button__danger {
-	color: var(--color-danger);
+	color: var(--tl-color-danger);
 	text-shadow: none;
 }
 
 @media (hover: hover) {
 	.tlui-button__primary:not(:disabled, :focus-visible):hover {
-		color: var(--color-primary);
+		color: var(--tl-color-primary);
 	}
 
 	.tlui-button__danger:not(:disabled, :focus-visible):hover {
-		color: var(--color-danger);
+		color: var(--tl-color-danger);
 		text-shadow: none;
 	}
 }
@@ -173,7 +173,7 @@
 
 .tlui-button__menu::after {
 	inset: 4px;
-	border-radius: var(--radius-2);
+	border-radius: var(--tl-radius-2);
 }
 
 .tlui-button__menu > .tlui-icon + .tlui-button__label {
@@ -203,13 +203,21 @@
 
 .tlui-main-toolbar__lock-button {
 	position: absolute;
-	top: 4px;
-	right: 0px;
 	pointer-events: all;
 	height: 40px;
 	width: 40px;
+	border-radius: var(--tl-radius-2);
+}
+
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
+	top: 4px;
+	right: 0px;
 	min-width: 0px;
-	border-radius: var(--radius-2);
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
+	bottom: 0px;
+	min-height: 0px;
 }
 
 .tlui-main-toolbar__lock-button::after {
@@ -232,24 +240,24 @@
 }
 
 .tlui-button__tool[aria-pressed='true'] {
-	color: var(--color-selected-contrast);
+	color: var(--tl-color-selected-contrast);
 }
 
 .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
-	color: var(--color-selected-contrast);
+	color: var(--tl-color-selected-contrast);
 }
 
 .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
-	background: var(--color-selected);
+	background: var(--tl-color-selected);
 	opacity: 1;
 }
 
-.tlui-layout__mobile .tlui-button__tool {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
 	height: 48px;
 	width: 43px;
 }
 
-.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
 	height: 16px;
 	width: 16px;
 }
@@ -266,6 +274,18 @@
 	margin-right: -2px;
 }
 
+/* Column layout */
+
+.tlui-column {
+	display: flex;
+	flex-direction: column;
+	padding: 2px 0;
+}
+.tlui-column > * {
+	margin-top: -2px;
+	margin-bottom: -2px;
+}
+
 /* Grid layout */
 
 .tlui-grid {
@@ -301,9 +321,9 @@
 	pointer-events: none;
 	user-select: none;
 	contain: strict;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	transform: translate3d(0, 0, 0);
-	--sab: env(safe-area-inset-bottom);
+	--tl-sab: env(safe-area-inset-bottom);
 	font-weight: 500;
 	line-height: 1.6;
 	-webkit-font-smoothing: antialiased;
@@ -356,11 +376,11 @@
 	justify-content: flex-start;
 	align-items: flex-start;
 	width: min-content;
-	gap: var(--space-3);
-	margin: var(--space-2) var(--space-3);
+	gap: var(--tl-space-3);
+	margin: var(--tl-space-2) var(--tl-space-3);
 	white-space: nowrap;
 	pointer-events: none;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 }
 
 /* ---------------------- Icon ---------------------- */
@@ -388,7 +408,7 @@
 
 .tlui-slider__container {
 	width: 100%;
-	padding: 0px var(--space-4);
+	padding: 0px var(--tl-space-4);
 }
 
 .tlui-slider {
@@ -414,7 +434,7 @@
 	content: '';
 	height: 3px;
 	width: 100%;
-	background-color: var(--color-muted-1);
+	background-color: var(--tl-color-muted-1);
 	border-radius: 14px;
 }
 
@@ -423,7 +443,7 @@
 	top: calc(50% - 2px);
 	left: 0px;
 	height: 3px;
-	background-color: var(--color-selected);
+	background-color: var(--tl-color-selected);
 	border-radius: 14px;
 }
 
@@ -435,16 +455,16 @@
 	height: 18px;
 	position: relative;
 	top: -1px;
-	background-color: var(--color-panel);
+	background-color: var(--tl-color-panel);
 	border-radius: 999px;
-	box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
+	box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
 }
 
 .tlui-slider__thumb:active {
 	cursor: grabbing;
 	box-shadow:
-		inset 0px 0px 0px 2px var(--color-text-1),
-		var(--shadow-1);
+		inset 0px 0px 0px 2px var(--tl-color-text-1),
+		var(--tl-shadow-1);
 }
 
 /* ---------------------- Input --------------------- */
@@ -453,7 +473,7 @@
 	background: none;
 	margin: 0px;
 	position: relative;
-	z-index: var(--layer-above);
+	z-index: var(--tl-layer-above);
 	height: 40px;
 	max-height: 40px;
 	display: flex;
@@ -462,8 +482,8 @@
 	font-family: inherit;
 	font-size: 12px;
 	font-weight: inherit;
-	color: var(--color-text-1);
-	padding: var(--space-4);
+	color: var(--tl-color-text-1);
+	padding: var(--tl-space-4);
 	padding-left: 0px;
 	border: none;
 	outline: none;
@@ -479,8 +499,8 @@
 	height: 44px;
 	display: flex;
 	align-items: center;
-	gap: var(--space-4);
-	color: var(--color-text);
+	gap: var(--tl-space-4);
+	color: var(--tl-color-text);
 }
 
 .tlui-input__wrapper > .tlui-icon {
@@ -512,7 +532,7 @@
 	grid-auto-columns: minmax(1em, auto);
 	align-self: bottom;
 	color: currentColor;
-	margin-left: var(--space-4);
+	margin-left: var(--tl-space-4);
 }
 
 .tlui-kbd > span {
@@ -529,13 +549,13 @@
 }
 
 .tlui-kbd:not(:last-child) {
-	margin-right: var(--space-2);
+	margin-right: var(--tl-space-2);
 }
 
 /* Focus Mode Button */
 
 .tlui-focus-button {
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	pointer-events: all;
 }
 
@@ -546,16 +566,16 @@
 }
 
 .tlui-menu {
-	z-index: var(--layer-menus);
+	z-index: var(--tl-layer-menus);
 	height: fit-content;
 	width: fit-content;
-	border-radius: var(--radius-3);
+	border-radius: var(--tl-radius-3);
 	pointer-events: all;
 	touch-action: auto;
 	overflow-y: auto;
 	overscroll-behavior: none;
-	background-color: var(--color-panel);
-	box-shadow: var(--shadow-3);
+	background-color: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-3);
 }
 
 .tlui-menu::-webkit-scrollbar {
@@ -573,7 +593,7 @@
 }
 
 .tlui-menu__group {
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 }
 .tlui-menu__group:nth-last-of-type(1) {
 	border-bottom: none;
@@ -583,23 +603,23 @@
 
 .tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
 .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
 @media (hover: hover) {
 	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	}
 
 	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	}
 }
 
@@ -624,7 +644,7 @@
 .tlui-menu-click-capture {
 	position: fixed;
 	inset: 0;
-	z-index: var(--layer-menu-click-capture);
+	z-index: var(--tl-layer-menu-click-capture);
 }
 
 /* --------------------- Popover -------------------- */
@@ -640,10 +660,10 @@
 	max-height: calc(var(--radix-popover-content-available-height) - 8px);
 	margin: 0px;
 	border: none;
-	border-radius: var(--radius-3);
-	background-color: var(--color-panel);
-	box-shadow: var(--shadow-3);
-	z-index: var(--layer-menus);
+	border-radius: var(--tl-radius-3);
+	background-color: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-3);
+	z-index: var(--tl-layer-menus);
 	overflow: hidden;
 	overflow-y: auto;
 	touch-action: auto;
@@ -656,22 +676,22 @@
 
 .tlui-menu-zone {
 	position: relative;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	width: fit-content;
-	border-right: 2px solid var(--color-background);
-	border-bottom: 2px solid var(--color-background);
-	border-bottom-right-radius: var(--radius-4);
-	background-color: var(--color-low);
+	border-right: 2px solid var(--tl-color-background);
+	border-bottom: 2px solid var(--tl-color-background);
+	border-bottom-right-radius: var(--tl-radius-4);
+	background-color: var(--tl-color-low);
 }
 
 .tlui-menu-zone *[data-state='open']::after {
-	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
 	.tlui-menu-zone *[data-state='open']:not(:hover)::after {
-		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 		opacity: 1;
 	}
 }
@@ -697,8 +717,8 @@
 	align-items: center;
 	width: 100%;
 	height: 40px;
-	padding-left: var(--space-4);
-	border-bottom: 1px solid var(--color-divider);
+	padding-left: var(--tl-space-4);
+	border-bottom: 1px solid var(--tl-color-divider);
 }
 
 .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
@@ -706,7 +726,7 @@
 }
 
 .tlui-page-menu__header__title {
-	color: var(--color-text);
+	color: var(--tl-color-text);
 	font-size: 12px;
 	flex-grow: 2;
 }
@@ -791,7 +811,7 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-text);
+	color: var(--tl-color-text);
 }
 
 .tlui-page_menu__item__sortable {
@@ -804,7 +824,7 @@
 	flex-direction: row;
 	align-items: center;
 	overflow: hidden;
-	z-index: var(--layer-above);
+	z-index: var(--tl-layer-above);
 }
 
 .tlui-page_menu__item__sortable__title {
@@ -816,7 +836,7 @@
 }
 
 .tlui-page_menu__item__sortable:focus-visible {
-	z-index: var(--layer-focused-input);
+	z-index: var(--tl-layer-focused-input);
 }
 
 .tlui-page_menu__item__sortable__handle {
@@ -825,7 +845,7 @@
 	min-width: 0px;
 	height: 40px;
 	cursor: grab;
-	color: var(--color-text-3);
+	color: var(--tl-color-text-3);
 	flex-shrink: 0;
 	margin-right: -9px;
 }
@@ -867,13 +887,13 @@
 }
 
 .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
 	.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 		opacity: 1;
 	}
 }
@@ -909,7 +929,7 @@
 	top: 48px;
 	left: -9999px;
 	padding: 8px 16px;
-	z-index: var(--layer-toasts);
+	z-index: var(--tl-layer-toasts);
 }
 
 .tl-skip-to-main-content:focus {
@@ -921,11 +941,11 @@
 .tlui-offline-indicator {
 	display: flex;
 	flex-direction: row;
-	gap: var(--space-3);
-	color: var(--color-text);
-	background-color: var(--color-low);
-	border: 3px solid var(--color-background);
-	padding: 0px var(--space-5);
+	gap: var(--tl-space-3);
+	color: var(--tl-color-text);
+	background-color: var(--tl-color-low);
+	border: 3px solid var(--tl-color-background);
+	padding: 0px var(--tl-space-5);
 	height: 42px;
 	align-items: center;
 	justify-content: center;
@@ -940,10 +960,10 @@
 /* ------------------- Style panel ------------------ */
 
 .tlui-style-panel__wrapper {
-	box-shadow: var(--shadow-2);
-	border-radius: var(--radius-3);
+	box-shadow: var(--tl-shadow-2);
+	border-radius: var(--tl-radius-3);
 	pointer-events: all;
-	background-color: var(--color-panel);
+	background-color: var(--tl-color-panel);
 	height: fit-content;
 	max-height: 100%;
 	margin: 8px;
@@ -952,7 +972,7 @@
 	overscroll-behavior: none;
 	overflow-y: auto;
 	overflow-x: hidden;
-	color: var(--color-text);
+	color: var(--tl-color-text);
 }
 /* if the style panel is the only child (ie no share menu), increase the margin */
 .tlui-style-panel__wrapper:only-child {
@@ -961,7 +981,7 @@
 
 .tlui-style-panel {
 	position: relative;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	pointer-events: all;
 	width: 148px;
 	max-width: 148px;
@@ -969,7 +989,7 @@
 
 .tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
 	border-radius: 10px;
-	outline: 2px solid var(--color-text);
+	outline: 2px solid var(--tl-color-text);
 	outline-offset: -5px;
 }
 
@@ -987,8 +1007,22 @@
 	flex-direction: column;
 }
 
-.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
-	border-bottom: 1px solid var(--color-divider);
+/*
+add a border to the bottom of all but the last section. we have to handle empty sections too, which
+are hidden and shouldn't be counted
+*/
+.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
+	border-bottom: 1px solid var(--tl-color-divider);
+}
+/*
+if a section ends with a slider and we're adding a border, we need some extra space for visual
+balance. we need to handle empty sections as above. is this the most complex css selector in all of
+tldraw? probably.
+*/
+.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
+		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
+	) {
+	margin-bottom: 7px;
 }
 
 .tlui-style-panel__section:empty {
@@ -997,19 +1031,19 @@
 
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 }
 
 .tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+	flex: 1;
 }
 
 .tlui-style-panel__double-select-picker {
 	display: flex;
 	grid-template-columns: 1fr auto;
 	align-items: center;
-	padding-left: var(--space-4);
-	color: var(--color-text-1);
+	padding-left: var(--tl-space-4);
+	color: var(--tl-color-text-1);
 	font-size: 12px;
 }
 
@@ -1023,13 +1057,16 @@
 
 .tlui-style-panel .tlui-button[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	}
 }
 
@@ -1039,14 +1076,14 @@
 .tlui-style-panel__section__common .tlui-style-panel__subheading,
 .tlui-style-panel__subheading + .tlui-slider__container {
 	margin: 0;
-	padding: var(--space-2) var(--space-3) 0px var(--space-4);
+	padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
 	font-size: 12px;
 	font-weight: inherit;
 	line-height: inherit;
 }
 
 .tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
-	padding-top: var(--space-3);
+	padding-top: var(--tl-space-3);
 }
 
 .tlui-style-panel__subheading + .tlui-slider__container {
@@ -1057,11 +1094,11 @@
 
 .tlui-layout__bottom {
 	grid-row: 2;
+	width: 100%;
 }
 
 .tlui-layout__bottom__main {
 	width: 100%;
-	position: relative;
 	display: flex;
 	align-items: flex-end;
 	justify-content: center;
@@ -1073,11 +1110,10 @@
 	display: flex;
 	width: min-content;
 	flex-direction: column;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	pointer-events: all;
 	position: absolute;
 	left: 0px;
-	bottom: 0px;
 }
 
 .tlui-navigation-panel::before {
@@ -1087,10 +1123,10 @@
 	z-index: -1;
 	inset: -2px -2px 0px 0px;
 	border-radius: 0;
-	border-top: 2px solid var(--color-background);
-	border-right: 2px solid var(--color-background);
-	border-top-right-radius: var(--radius-4);
-	background-color: var(--color-low);
+	border-top: 2px solid var(--tl-color-background);
+	border-right: 2px solid var(--tl-color-background);
+	border-top-right-radius: var(--tl-radius-4);
+	background-color: var(--tl-color-low);
 }
 
 .tlui-navigation-panel[data-a11y='true']::before {
@@ -1104,7 +1140,7 @@
 	height: 96px;
 	min-height: 96px;
 	overflow: hidden;
-	padding: var(--space-3);
+	padding: var(--tl-space-3);
 	padding-top: 0px;
 }
 
@@ -1124,7 +1160,23 @@
 	align-items: center;
 	justify-content: center;
 	flex-grow: 2;
-	padding-bottom: calc(var(--space-3) + var(--sab));
+}
+
+.tlui-main-toolbar--horizontal {
+	padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
+	max-width: 100%;
+}
+
+.tlui-main-toolbar--vertical {
+	position: absolute;
+	left: 0;
+	top: 90px; /* height of page menu + 'back to content' button */
+	bottom: 140px; /* height of expanded mini-map */
+	padding-left: calc(var(--tl-space-3) + var(--tl-sab));
+}
+
+[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
+	bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
 }
 
 /* Centered Content */
@@ -1132,73 +1184,145 @@
 	position: relative;
 	width: fit-content;
 	display: flex;
-	gap: var(--space-3);
-	align-items: flex-end;
+	gap: var(--tl-space-3);
+	align-items: flex-start;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
+	flex-direction: column;
 }
 
-.tlui-main-toolbar__left {
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
 	width: fit-content;
 }
+.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
+	display: flex;
+	height: fit-content;
+}
 
 /* Row of controls + lock button */
 .tlui-main-toolbar__extras {
 	position: relative;
-	z-index: var(--layer-above);
-	width: 100%;
+	z-index: var(--tl-layer-above);
 	pointer-events: none;
-	top: 6px;
-	height: 48px;
+	align-self: stretch;
 }
 
 .tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
+	height: 48px;
+	top: 6px;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
+	width: 48px;
+	order: 1;
+}
+
 .tlui-main-toolbar__extras__controls {
-	display: flex;
 	position: relative;
-	flex-direction: row;
-	z-index: var(--layer-above);
-	background-color: var(--color-low);
-	border-top-left-radius: var(--radius-4);
-	border-top-right-radius: var(--radius-4);
-	border: 2px solid var(--color-background);
+	z-index: var(--tl-layer-above);
+	background-color: var(--tl-color-low);
+	border: 2px solid var(--tl-color-background);
+	pointer-events: all;
+}
+
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
+	border-top-left-radius: var(--tl-radius-4);
+	border-top-right-radius: var(--tl-radius-4);
 	margin-left: 8px;
 	margin-right: 0px;
-	pointer-events: all;
+	width: fit-content;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
+	border-top-right-radius: var(--tl-radius-4);
+	border-bottom-right-radius: var(--tl-radius-4);
+	margin-top: 8px;
+	margin-left: -2px;
+	margin-bottom: 0px;
 	width: fit-content;
 }
 
 .tlui-main-toolbar__tools {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	border-radius: var(--radius-4);
-	z-index: var(--layer-panels);
+	border-radius: var(--tl-radius-4);
+	z-index: var(--tl-layer-panels);
 	pointer-events: all;
 	position: relative;
-	background: var(--color-panel);
-	box-shadow: var(--shadow-2);
+	background: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-2);
 }
 
-.tlui-main-toolbar__overflow {
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
+	align-self: flex-end;
+}
+.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
+	align-self: flex-start;
+}
+
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
 	width: 40px;
 	margin-left: 2px;
 }
+.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
+	height: 40px;
+	margin-top: 2px;
+}
 
-.tlui-layout__mobile .tlui-main-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-main-toolbar *[data-state='open']::after {
-	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+.tlui-main-toolbar--horizontal *[data-state='open']::after {
+	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	opacity: 1;
+}
+.tlui-main-toolbar--vertical *[data-state='open']::after {
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	opacity: 1;
 }
 
+.tlui-main-toolbar__overflow-content {
+	touch-action: none;
+}
+
+.tlui-main-toolbar__tools [data-toolbar-visible='false'],
+.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
+	display: none;
+}
+
+.tlui-main-toolbar__group:empty {
+	display: none;
+}
+.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
+	border-right: 1px solid var(--color-divider);
+	margin-right: 2px;
+}
+.tlui-column.tlui-main-toolbar__group:not(
+		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
+	) {
+	border-bottom: 1px solid var(--color-divider);
+	margin-bottom: 2px;
+}
+.tlui-grid.tlui-main-toolbar__group {
+	grid-column: 1 / span 4;
+}
+.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
+	border-bottom: 1px solid var(--color-divider);
+	margin-bottom: 2px;
+}
+
 @media (hover: hover) {
-	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
-		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
+		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		opacity: 1;
+	}
+	.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 		opacity: 1;
 	}
 }
@@ -1209,44 +1333,40 @@
 	font-size: 12px;
 	padding: 2px 8px;
 	border-radius: 4px;
-	background-color: var(--color-tooltip);
+	background-color: var(--tl-color-tooltip);
 	box-shadow: none;
-	color: var(--color-text-shadow);
+	color: var(--tl-color-text-shadow);
 	max-width: 400px;
 	width: fit-content;
 	text-align: center;
-	pointer-events: none;
 	will-change: transform, opacity;
 	z-index: 2;
 }
 
 .tlui-tooltip__arrow {
-	fill: var(--color-tooltip);
+	fill: var(--tl-color-tooltip);
 	will-change: opacity;
 }
 
 [data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
-	z-index: var(--layer-toasts) !important;
-}
-
-[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
-	transition: all 0.1s ease-out;
+	z-index: var(--tl-layer-toasts) !important;
+	pointer-events: none;
 }
 
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {
-	background-color: var(--color-low);
+	background-color: var(--tl-color-low);
 	width: 100%;
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr auto auto auto;
 	justify-content: space-between;
-	padding-left: var(--space-4);
-	border-top: 1px solid var(--color-background);
+	padding-left: var(--tl-space-4);
+	border-top: 1px solid var(--tl-color-background);
 	font-size: 12px;
-	color: var(--color-text-1);
-	z-index: var(--layer-panels);
+	color: var(--tl-color-text-1);
+	z-index: var(--tl-layer-panels);
 	pointer-events: all;
 }
 
@@ -1262,7 +1382,7 @@
 
 .tlui-debug-panel__fps__slow {
 	font-weight: bold;
-	color: var(--color-danger);
+	color: var(--tl-color-danger);
 }
 
 .tlui-a11y-audit {
@@ -1272,7 +1392,7 @@
 .tlui-a11y-audit th,
 .tlui-a11y-audit td {
 	padding: 8px;
-	border: 1px solid var(--color-low-border);
+	border: 1px solid var(--tl-color-low-border);
 }
 
 /* --------------------- Toasts --------------------- */
@@ -1285,10 +1405,10 @@
 	align-items: flex-end;
 	justify-content: flex-end;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var(--tl-space-3);
 	pointer-events: none;
-	padding: 0px var(--space-3) 64px 0px;
-	z-index: var(--layer-toasts);
+	padding: 0px var(--tl-space-3) 64px 0px;
+	z-index: var(--tl-layer-toasts);
 }
 
 .tlui-toast__viewport > * {
@@ -1297,34 +1417,34 @@
 
 .tlui-toast__icon {
 	padding-top: 11px;
-	padding-left: var(--space-4);
-	color: var(--color-text-1);
+	padding-left: var(--tl-space-4);
+	color: var(--tl-color-text-1);
 }
 
 .tlui-toast__container {
 	min-width: 200px;
 	display: flex;
 	flex-direction: row;
-	background-color: var(--color-panel);
-	box-shadow: var(--shadow-2);
-	border-radius: var(--radius-3);
+	background-color: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-2);
+	border-radius: var(--tl-radius-3);
 	font-size: 12px;
 }
 
 .tlui-toast__container[data-severity='success'] .tlui-icon {
-	color: var(--color-success);
+	color: var(--tl-color-success);
 }
 
 .tlui-toast__container[data-severity='info'] .tlui-icon {
-	color: var(--color-info);
+	color: var(--tl-color-info);
 }
 
 .tlui-toast__container[data-severity='warning'] .tlui-icon {
-	color: var(--color-warning);
+	color: var(--tl-color-warning);
 }
 
 .tlui-toast__container[data-severity='error'] .tlui-icon {
-	color: var(--color-danger);
+	color: var(--tl-color-danger);
 }
 
 .tlui-toast__main {
@@ -1333,27 +1453,27 @@
 }
 
 .tlui-toast__content {
-	padding: var(--space-4);
+	padding: var(--tl-space-4);
 	display: flex;
 	line-height: 1.4;
 	flex-direction: column;
-	gap: var(--space-3);
+	gap: var(--tl-space-3);
 }
 
 .tlui-toast__main[data-actions='true'] .tlui-toast__content {
-	padding-bottom: var(--space-2);
+	padding-bottom: var(--tl-space-2);
 }
 
 .tlui-toast__title {
 	font-weight: bold;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 	/* this makes the default toast look better */
 	line-height: 16px;
 }
 
 .tlui-toast__description {
-	color: var(--color-text-1);
-	padding: var(--space-3);
+	color: var(--tl-color-text-1);
+	padding: var(--tl-space-3);
 	margin: 0px;
 	padding: 0px;
 }
@@ -1405,14 +1525,14 @@
 	left: 0px;
 	width: 100%;
 	height: 100%;
-	z-index: var(--layer-canvas-overlays);
-	background-color: var(--color-overlay);
+	z-index: var(--tl-layer-canvas-overlays);
+	background-color: var(--tl-color-overlay);
 	pointer-events: all;
 	animation: tl-fade-in 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
-	padding: 0px var(--space-3);
+	padding: 0px var(--tl-space-3);
 }
 
 .tlui-dialog__content {
@@ -1420,9 +1540,9 @@
 	flex-direction: column;
 	position: relative;
 	cursor: default;
-	background-color: var(--color-panel);
-	box-shadow: var(--shadow-3);
-	border-radius: var(--radius-3);
+	background-color: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-3);
+	border-radius: var(--tl-radius-3);
 	font-size: 12px;
 	overflow: hidden;
 	min-width: 300px;
@@ -1435,9 +1555,9 @@
 	display: flex;
 	align-items: center;
 	flex: 0;
-	z-index: var(--layer-header-footer);
-	padding-left: var(--space-4);
-	color: var(--color-text);
+	z-index: var(--tl-layer-header-footer);
+	padding-left: var(--tl-space-4);
+	color: var(--tl-color-text);
 	height: 40px;
 }
 
@@ -1446,7 +1566,7 @@
 	font-weight: inherit;
 	font-size: 12px;
 	margin: 0px;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 }
 
 .tlui-dialog__header__close {
@@ -1454,16 +1574,16 @@
 }
 
 .tlui-dialog__body {
-	padding: var(--space-4) var(--space-4);
+	padding: var(--tl-space-4) var(--tl-space-4);
 	flex: 0 1;
 	overflow-y: auto;
 	overflow-x: hidden;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 	user-select: all;
 	-webkit-user-select: text;
 }
 .tlui-dialog__body a {
-	color: var(--color-selected);
+	color: var(--tl-color-selected);
 }
 
 .tlui-dialog__body ul,
@@ -1471,13 +1591,13 @@
 	padding-left: 16px;
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-2);
+	gap: var(--tl-space-2);
 }
 
 .tlui-dialog__footer {
 	position: relative;
 	min-height: 12px;
-	z-index: var(--layer-header-footer);
+	z-index: var(--tl-layer-header-footer);
 }
 
 .tlui-dialog__footer__actions {
@@ -1497,15 +1617,15 @@
 .tlui-edit-link-dialog {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-4);
-	color: var(--color-text);
+	gap: var(--tl-space-4);
+	color: var(--tl-color-text);
 }
 
 .tlui-edit-link-dialog__input {
-	background-color: var(--color-muted-2);
+	background-color: var(--tl-color-muted-2);
 	flex-grow: 2;
-	border-radius: var(--radius-2);
-	padding: 0px var(--space-4);
+	border-radius: var(--tl-radius-2);
+	padding: 0px var(--tl-space-4);
 }
 
 /* Embed Dialog */
@@ -1513,15 +1633,15 @@
 .tlui-embed__spacer {
 	flex-grow: 2;
 	min-height: 0px;
-	margin-left: calc(-1 * var(--space-4));
-	margin-top: calc(-1 * var(--space-4));
+	margin-left: calc(-1 * var(--tl-space-4));
+	margin-top: calc(-1 * var(--tl-space-4));
 	pointer-events: none;
 }
 
 .tlui-embed-dialog__list {
 	display: flex;
 	flex-direction: column;
-	padding: 0px var(--space-3) var(--space-4) var(--space-3);
+	padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
 }
 
 .tlui-embed-dialog__item__image {
@@ -1533,49 +1653,49 @@
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center center;
-	background-color: var(--color-selected-contrast);
-	border-radius: var(--radius-1);
+	background-color: var(--tl-color-selected-contrast);
+	border-radius: var(--tl-radius-1);
 }
 
 .tlui-embed-dialog__enter {
 	display: flex;
 	flex-direction: column;
-	gap: var(--space-4);
-	color: var(--color-text-1);
+	gap: var(--tl-space-4);
+	color: var(--tl-color-text-1);
 }
 
 .tlui-embed-dialog__input {
-	background-color: var(--color-muted-2);
+	background-color: var(--tl-color-muted-2);
 	flex-grow: 2;
-	border-radius: var(--radius-2);
-	padding: 0px var(--space-4);
+	border-radius: var(--tl-radius-2);
+	padding: 0px var(--tl-space-4);
 }
 
 .tlui-embed-dialog__warning {
-	color: var(--color-danger);
+	color: var(--tl-color-danger);
 	text-shadow: none;
 }
 
 .tlui-embed-dialog__instruction__link {
 	display: flex;
-	gap: var(--space-1);
-	margin-top: var(--space-4);
+	gap: var(--tl-space-1);
+	margin-top: var(--tl-space-4);
 }
 
 .tlui-embed-dialog__enter a {
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 }
 
 /* --------------- Keyboard shortcuts --------------- */
 
 .tlui-shortcuts-dialog__header {
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 }
 
 .tlui-shortcuts-dialog__body {
 	position: relative;
 	columns: 3;
-	column-gap: var(--space-9);
+	column-gap: var(--tl-space-9);
 	pointer-events: all;
 	touch-action: auto;
 
@@ -1593,14 +1713,14 @@
 
 .tlui-shortcuts-dialog__group {
 	break-inside: avoid-column;
-	padding-bottom: var(--space-6);
+	padding-bottom: var(--tl-space-6);
 }
 
 .tlui-shortcuts-dialog__group__title {
 	font-size: inherit;
 	font-weight: inherit;
 	margin: 0px;
-	color: var(--color-text-3);
+	color: var(--tl-color-text-3);
 	height: 32px;
 	display: flex;
 	align-items: center;
@@ -1609,12 +1729,12 @@
 .tlui-shortcuts-dialog__group__content {
 	display: flex;
 	flex-direction: column;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 }
 
 .tlui-shortcuts-dialog__key-pair {
 	display: flex;
-	gap: var(--space-4);
+	gap: var(--tl-space-4);
 	align-items: center;
 	justify-content: space-between;
 	height: 32px;
@@ -1641,12 +1761,12 @@
 	height: 24px;
 	background: linear-gradient(
 		to bottom,
-		var(--color-panel-transparent) 0%,
-		var(--color-panel) 90%,
-		var(--color-panel) 100%
+		var(--tl-color-panel-transparent) 0%,
+		var(--tl-color-panel) 90%,
+		var(--tl-color-panel) 100%
 	);
-	border-bottom-left-radius: var(--radius-3);
-	border-bottom-right-radius: var(--radius-3);
+	border-bottom-left-radius: var(--tl-radius-3);
+	border-bottom-right-radius: var(--tl-radius-3);
 	pointer-events: none;
 }
 
@@ -1661,10 +1781,10 @@
 .tlui-help-menu {
 	pointer-events: all;
 	position: absolute;
-	bottom: var(--space-2);
-	right: var(--space-2);
-	z-index: var(--layer-panels);
-	border: 2px solid var(--color-background);
+	bottom: var(--tl-space-2);
+	right: var(--tl-space-2);
+	z-index: var(--tl-layer-panels);
+	border: 2px solid var(--tl-color-background);
 	border-radius: 100%;
 }
 
@@ -1675,7 +1795,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
-	z-index: var(--layer-panels);
+	z-index: var(--tl-layer-panels);
 	align-items: center;
 	padding-top: 2px;
 	padding-right: 4px;
@@ -1691,7 +1811,7 @@
 	border: none;
 	cursor: pointer;
 	pointer-events: all;
-	border-radius: var(--radius-1);
+	border-radius: var(--tl-radius-1);
 	padding-right: 1px;
 	height: 100%;
 }
@@ -1704,8 +1824,8 @@
 .tlui-people-menu__avatar {
 	height: 24px;
 	width: 24px;
-	border: 2px solid var(--color-background);
-	background-color: var(--color-low);
+	border: 2px solid var(--tl-color-background);
+	background-color: var(--tl-color-low);
 	border-radius: 100%;
 	display: flex;
 	align-items: center;
@@ -1714,7 +1834,7 @@
 	font-size: 10px;
 	font-weight: bold;
 	text-align: center;
-	color: var(--color-selected-contrast);
+	color: var(--tl-color-selected-contrast);
 	z-index: 2;
 }
 
@@ -1728,7 +1848,7 @@
 
 @media (hover: hover) {
 	.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
-		border-color: var(--color-low);
+		border-color: var(--tl-color-low);
 	}
 }
 
@@ -1736,12 +1856,12 @@
 	min-width: 0px;
 	font-size: 11px;
 	font-weight: 600;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 	font-family: inherit;
 	padding: 0px 4px;
 }
 .tlui-people-menu__more::after {
-	border-radius: var(--radius-2);
+	border-radius: var(--tl-radius-2);
 	inset: 0px;
 }
 
@@ -1770,7 +1890,7 @@
 }
 
 .tlui-people-menu__section:not(:last-child) {
-	border-bottom: 1px solid var(--color-divider);
+	border-bottom: 1px solid var(--tl-color-divider);
 }
 
 .tlui-people-menu__user {
@@ -1789,7 +1909,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: 12px;
-	color: var(--color-text-1);
+	color: var(--tl-color-text-1);
 	max-width: 100%;
 	flex-grow: 1;
 	flex-shrink: 100;
@@ -1801,7 +1921,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: 12px;
-	color: var(--color-text-3);
+	color: var(--tl-color-text-3);
 	flex-grow: 100;
 	flex-shrink: 0;
 	margin-left: 4px;
@@ -1892,7 +2012,7 @@
 	inset: 0px;
 	border-width: 2px;
 	border-style: solid;
-	z-index: var(--layer-following-indicator);
+	z-index: var(--tl-layer-following-indicator);
 	pointer-events: none;
 }
 
@@ -1911,7 +2031,7 @@
 }
 
 .tlui-contextual-toolbar [data-isactive='true']::after {
-	background-color: var(--color-muted-2);
+	background-color: var(--tl-color-muted-2);
 	opacity: 1;
 }
 
@@ -1927,7 +2047,7 @@
 
 .tlui-contextual-toolbar[data-visible='true'] {
 	opacity: 1;
-	z-index: var(--layer-menus);
+	z-index: var(--tl-layer-menus);
 }
 
 .tlui-contextual-toolbar[data-interactive='true'],
@@ -1986,7 +2106,7 @@
 
 @keyframes tlui-slide-in {
 	from {
-		transform: translateX(calc(100% + var(--space-3)));
+		transform: translateX(calc(100% + var(--tl-space-3)));
 	}
 	to {
 		transform: translateX(0px);
@@ -1998,6 +2118,6 @@
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}
 	to {
-		transform: translateX(calc(100% + var(--space-3)));
+		transform: translateX(calc(100% + var(--tl-space-3)));
 	}
 }