tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/tldraw.css

@@ -9,57 +9,57 @@
 	height: 100%;
 	font-size: 12px;
 	/* Spacing */
-	--tl-space-1: 2px;
-	--tl-space-2: 4px;
-	--tl-space-3: 8px;
-	--tl-space-4: 12px;
-	--tl-space-5: 16px;
-	--tl-space-6: 20px;
-	--tl-space-7: 28px;
-	--tl-space-8: 32px;
-	--tl-space-9: 64px;
-	--tl-space-10: 72px;
+	--space-1: 2px;
+	--space-2: 4px;
+	--space-3: 8px;
+	--space-4: 12px;
+	--space-5: 16px;
+	--space-6: 20px;
+	--space-7: 28px;
+	--space-8: 32px;
+	--space-9: 64px;
+	--space-10: 72px;
 	/* Radius */
-	--tl-radius-0: 2px;
-	--tl-radius-1: 4px;
-	--tl-radius-2: 6px;
-	--tl-radius-3: 9px;
-	--tl-radius-4: 11px;
+	--radius-0: 2px;
+	--radius-1: 4px;
+	--radius-2: 6px;
+	--radius-3: 9px;
+	--radius-4: 11px;
 
 	/* Canvas z-index */
-	--tl-layer-canvas-hidden: -999999;
-	--tl-layer-canvas-background: 100;
-	--tl-layer-canvas-grid: 150;
-	--tl-layer-watermark: 200;
-	--tl-layer-canvas-shapes: 300;
-	--tl-layer-canvas-overlays: 500;
-	--tl-layer-canvas-blocker: 10000;
+	--layer-canvas-hidden: -999999;
+	--layer-canvas-background: 100;
+	--layer-canvas-grid: 150;
+	--layer-watermark: 200;
+	--layer-canvas-shapes: 300;
+	--layer-canvas-overlays: 500;
+	--layer-canvas-blocker: 10000;
 
 	/* Canvas overlays z-index */
-	--tl-layer-overlays-collaborator-scribble: 10;
-	--tl-layer-overlays-collaborator-brush: 20;
-	--tl-layer-overlays-collaborator-shape-indicator: 30;
-	--tl-layer-overlays-user-scribble: 40;
-	--tl-layer-overlays-user-brush: 50;
-	--tl-layer-overlays-user-snapline: 90;
-	--tl-layer-overlays-selection-fg: 100;
+	--layer-overlays-collaborator-scribble: 10;
+	--layer-overlays-collaborator-brush: 20;
+	--layer-overlays-collaborator-shape-indicator: 30;
+	--layer-overlays-user-scribble: 40;
+	--layer-overlays-user-brush: 50;
+	--layer-overlays-user-snapline: 90;
+	--layer-overlays-selection-fg: 100;
 	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
-	--tl-layer-overlays-user-handles: 105;
-	--tl-layer-overlays-user-indicator-hint: 110;
-	--tl-layer-overlays-custom: 115;
-	--tl-layer-overlays-collaborator-cursor-hint: 120;
-	--tl-layer-overlays-collaborator-cursor: 130;
+	--layer-overlays-user-handles: 105;
+	--layer-overlays-user-indicator-hint: 110;
+	--layer-overlays-custom: 115;
+	--layer-overlays-collaborator-cursor-hint: 120;
+	--layer-overlays-collaborator-cursor: 130;
 
 	/* Text editor z-index */
-	--tl-layer-text-container: 1;
-	--tl-layer-text-content: 3;
-	--tl-layer-text-editor: 4;
+	--layer-text-container: 1;
+	--layer-text-content: 3;
+	--layer-text-editor: 4;
 
 	/* Error fallback z-index */
-	--tl-layer-error-overlay: 1;
-	--tl-layer-error-canvas: 2;
-	--tl-layer-error-canvas-after: 3;
-	--tl-layer-error-content: 4;
+	--layer-error-overlay: 1;
+	--layer-error-canvas: 2;
+	--layer-error-canvas-after: 3;
+	--layer-error-content: 4;
 
 	/* Misc */
 	--tl-zoom: 1;
@@ -124,15 +124,12 @@
 	--tl-font-serif: 'tldraw_serif', serif;
 	--tl-font-mono: 'tldraw_mono', monospace;
 	/* text outline */
-	--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
-	--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
+	--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
+	--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
 	--tl-text-outline-reference:
-		0 var(--tl-text-outline-b) 0 var(--tl-color-background),
-		0 var(--tl-text-outline-a) 0 var(--tl-color-background),
-		var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
-		var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
-		var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
-		var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
+		0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
+		var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
+		var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);
 	--tl-text-outline: var(--tl-text-outline-reference);
 	/* own properties */
 	position: relative;
@@ -140,118 +137,116 @@
 	height: 100%;
 	width: 100%;
 	overflow: clip;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 }
 
 .tl-theme__light {
 	/* Canvas */
-	--tl-color-snap: hsl(0, 76%, 60%);
-	--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
-	--tl-color-selection-stroke: hsl(214, 84%, 56%);
-	--tl-color-background: hsl(210, 20%, 98%);
-	--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
-	--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
-	--tl-color-grid: hsl(0, 0%, 43%);
+	--color-snap: hsl(0, 76%, 60%);
+	--color-selection-fill: hsl(210, 100%, 56%, 24%);
+	--color-selection-stroke: hsl(214, 84%, 56%);
+	--color-background: hsl(210, 20%, 98%);
+	--color-brush-fill: hsl(0, 0%, 56%, 10.2%);
+	--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
+	--color-grid: hsl(0, 0%, 43%);
 	/* UI */
-	--tl-color-low: hsl(204, 16%, 94%);
-	--tl-color-low-border: hsl(204, 16%, 92%);
-	--tl-color-culled: hsl(204, 14%, 93%);
-	--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
-	--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
-	--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
-	--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
-	--tl-color-hint: hsl(0, 0%, 0%, 5.5%);
-	--tl-color-overlay: hsl(0, 0%, 0%, 20%);
-	--tl-color-divider: hsl(0, 0%, 91%);
-	--tl-color-panel: hsl(0, 0%, 99%);
-	--tl-color-panel-contrast: hsl(0, 0%, 100%);
-	--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
-	--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
-	--tl-color-selected: hsl(214, 84%, 56%);
-	--tl-color-selected-contrast: hsl(0, 0%, 100%);
-	--tl-color-focus: hsl(219, 65%, 50%);
-	--tl-color-tooltip: hsla(200, 14%, 4%, 1);
+	--color-low: hsl(204, 16%, 94%);
+	--color-low-border: hsl(204, 16%, 92%);
+	--color-culled: hsl(204, 14%, 93%);
+	--color-muted-none: hsl(0, 0%, 0%, 0%);
+	--color-muted-0: hsl(0, 0%, 0%, 2%);
+	--color-muted-1: hsl(0, 0%, 0%, 10%);
+	--color-muted-2: hsl(0, 0%, 0%, 4.3%);
+	--color-hint: hsl(0, 0%, 0%, 5.5%);
+	--color-overlay: hsl(0, 0%, 0%, 20%);
+	--color-divider: hsl(0, 0%, 91%);
+	--color-panel: hsl(0, 0%, 99%);
+	--color-panel-contrast: hsl(0, 0%, 100%);
+	--color-panel-overlay: hsl(0, 0%, 100%, 82%);
+	--color-panel-transparent: hsla(0, 0%, 99%, 0%);
+	--color-selected: hsl(214, 84%, 56%);
+	--color-selected-contrast: hsl(0, 0%, 100%);
+	--color-focus: hsl(219, 65%, 50%);
 	/* Text */
-	--tl-color-text: hsl(0, 0%, 0%);
-	--tl-color-text-0: hsl(0, 0%, 11%);
-	--tl-color-text-1: hsl(0, 0%, 18%);
-	--tl-color-text-3: hsl(204, 4%, 45%);
-	--tl-color-text-shadow: hsl(0, 0%, 100%);
-	--tl-color-text-highlight: hsl(52, 100%, 50%);
-	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
+	--color-text: hsl(0, 0%, 0%);
+	--color-text-0: hsl(0, 0%, 11%);
+	--color-text-1: hsl(0, 0%, 18%);
+	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-shadow: hsl(0, 0%, 100%);
+	--color-text-highlight: hsl(52, 100%, 50%);
+	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
 	/* Named */
-	--tl-color-primary: hsl(214, 84%, 56%);
-	--tl-color-success: hsl(123, 46%, 34%);
-	--tl-color-info: hsl(201, 98%, 41%);
-	--tl-color-warning: hsl(27, 98%, 47%);
-	--tl-color-danger: hsl(0, 90%, 43%);
-	--tl-color-laser: hsl(0, 100%, 50%);
+	--color-primary: hsl(214, 84%, 56%);
+	--color-success: hsl(123, 46%, 34%);
+	--color-info: hsl(201, 98%, 41%);
+	--color-warning: hsl(27, 98%, 47%);
+	--color-danger: hsl(0, 90%, 43%);
+	--color-laser: hsl(0, 100%, 50%);
 	/* Shadows */
-	--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
-	--tl-shadow-2:
+	--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
+	--shadow-2:
 		0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
-		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
-	--tl-shadow-3:
+		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-3:
 		0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
-		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
-	--tl-shadow-4:
+		inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-4:
 		0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
-		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
+		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
 }
 
 .tl-theme__dark {
 	/* Canvas */
-	--tl-color-snap: hsl(0, 76%, 60%);
-	--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
-	--tl-color-selection-stroke: hsl(214, 84%, 56%);
-	--tl-color-background: hsl(240, 5%, 6.5%);
-	--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
-	--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
-	--tl-color-grid: hsl(0, 0%, 40%);
+	--color-snap: hsl(0, 76%, 60%);
+	--color-selection-fill: hsl(209, 100%, 57%, 20%);
+	--color-selection-stroke: hsl(214, 84%, 56%);
+	--color-background: hsl(240, 5%, 6.5%);
+	--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
+	--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
+	--color-grid: hsl(0, 0%, 40%);
 	/* UI */
-	--tl-color-low: hsl(260, 4.5%, 10.5%);
-	--tl-color-low-border: hsl(207, 10%, 10%);
-	--tl-color-culled: hsl(210, 11%, 19%);
-	--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
-	--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
-	--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
-	--tl-color-muted-2: hsl(0, 0%, 100%, 5%);
-	--tl-color-hint: hsl(0, 0%, 100%, 7%);
-	--tl-color-overlay: hsl(0, 0%, 0%, 50%);
-	--tl-color-divider: hsl(240, 9%, 22%);
-	--tl-color-panel: hsl(235, 6.8%, 13.5%);
-	--tl-color-panel-contrast: hsl(245, 12%, 23%);
-	--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
-	--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
-	--tl-color-selected: hsl(217, 89%, 61%);
-	--tl-color-selected-contrast: hsl(0, 0%, 100%);
-	--tl-color-focus: hsl(217, 76%, 80%);
-	--tl-color-tooltip: hsla(0, 0%, 100%, 1);
+	--color-low: hsl(260, 4.5%, 10.5%);
+	--color-low-border: hsl(207, 10%, 10%);
+	--color-culled: hsl(210, 11%, 19%);
+	--color-muted-none: hsl(0, 0%, 100%, 0%);
+	--color-muted-0: hsl(0, 0%, 100%, 2%);
+	--color-muted-1: hsl(0, 0%, 100%, 10%);
+	--color-muted-2: hsl(0, 0%, 100%, 5%);
+	--color-hint: hsl(0, 0%, 100%, 7%);
+	--color-overlay: hsl(0, 0%, 0%, 50%);
+	--color-divider: hsl(240, 9%, 22%);
+	--color-panel: hsl(235, 6.8%, 13.5%);
+	--color-panel-contrast: hsl(245, 12%, 23%);
+	--color-panel-overlay: hsl(210, 10%, 24%, 82%);
+	--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
+	--color-selected: hsl(217, 89%, 61%);
+	--color-selected-contrast: hsl(0, 0%, 100%);
+	--color-focus: hsl(217, 76%, 80%);
 	/* Text */
-	--tl-color-text: hsl(210, 17%, 98%);
-	--tl-color-text-0: hsl(0, 9%, 94%);
-	--tl-color-text-1: hsl(0, 0%, 85%);
-	--tl-color-text-3: hsl(204, 4%, 75%);
-	--tl-color-text-shadow: hsl(210, 13%, 18%);
-	--tl-color-text-highlight: hsl(52, 100%, 41%);
-	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
+	--color-text: hsl(210, 17%, 98%);
+	--color-text-0: hsl(0, 9%, 94%);
+	--color-text-1: hsl(0, 0%, 85%);
+	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-shadow: hsl(210, 13%, 18%);
+	--color-text-highlight: hsl(52, 100%, 41%);
+	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
 	/* Named */
-	--tl-color-primary: hsl(214, 84%, 56%);
-	--tl-color-success: hsl(123, 38%, 57%);
-	--tl-color-info: hsl(199, 92%, 56%);
-	--tl-color-warning: hsl(36, 100%, 57%);
-	--tl-color-danger: hsl(0, 82%, 66%);
-	--tl-color-laser: hsl(0, 100%, 50%);
+	--color-primary: hsl(214, 84%, 56%);
+	--color-success: hsl(123, 38%, 57%);
+	--color-info: hsl(199, 92%, 56%);
+	--color-warning: hsl(36, 100%, 57%);
+	--color-danger: hsl(0, 82%, 66%);
+	--color-laser: hsl(0, 100%, 50%);
 	/* Shadows */
-	--tl-shadow-1:
+	--shadow-1:
 		0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
-		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
-	--tl-shadow-2:
+		inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-2:
 		0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
-		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
-	--tl-shadow-3:
+		inset 0px 0px 0px 1px var(--color-panel-contrast);
+	--shadow-3:
 		0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
-		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
+		inset 0px 0px 0px 1px var(--color-panel-contrast);
 }
 
 .tl-counter-scaled {
@@ -277,7 +272,7 @@
 }
 
 .tl-container__focused {
-	outline: 1px solid var(--tl-color-low);
+	outline: 1px solid var(--color-low);
 }
 
 input,
@@ -293,7 +288,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 	cursor: var(--tl-cursor);
 	overflow: clip;
 	content-visibility: auto;
@@ -303,7 +298,7 @@ input,
 
 .tl-shapes {
 	position: relative;
-	z-index: var(--tl-layer-canvas-shapes);
+	z-index: var(--layer-canvas-shapes);
 }
 
 .tl-overlays {
@@ -314,7 +309,7 @@ input,
 	width: 100%;
 	contain: strict;
 	pointer-events: none;
-	z-index: var(--tl-layer-canvas-overlays);
+	z-index: var(--layer-canvas-overlays);
 }
 
 .tl-overlays__item {
@@ -338,7 +333,7 @@ input,
 /* ------------------- Background ------------------- */
 
 .tl-background__wrapper {
-	z-index: var(--tl-layer-canvas-background);
+	z-index: var(--layer-canvas-background);
 	position: absolute;
 	inset: 0px;
 	height: 100%;
@@ -346,7 +341,7 @@ input,
 }
 
 .tl-background {
-	background-color: var(--tl-color-background);
+	background-color: var(--color-background);
 	width: 100%;
 	height: 100%;
 }
@@ -360,12 +355,12 @@ input,
 	height: 100%;
 	touch-action: none;
 	pointer-events: none;
-	z-index: var(--tl-layer-canvas-grid);
+	z-index: var(--layer-canvas-grid);
 	contain: strict;
 }
 
 .tl-grid-dot {
-	fill: var(--tl-color-grid);
+	fill: var(--color-grid);
 }
 
 /* --------------------- Layers --------------------- */
@@ -383,54 +378,54 @@ input,
 
 /* back of the stack, behind user's stuff */
 .tl-collaborator__scribble {
-	z-index: var(--tl-layer-overlays-collaborator-scribble);
+	z-index: var(--layer-overlays-collaborator-scribble);
 }
 
 .tl-collaborator__brush {
-	z-index: var(--tl-layer-overlays-collaborator-brush);
+	z-index: var(--layer-overlays-collaborator-brush);
 }
 
 .tl-collaborator__shape-indicator {
-	z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
+	z-index: var(--layer-overlays-collaborator-shape-indicator);
 }
 
 .tl-user-scribble {
-	z-index: var(--tl-layer-overlays-user-scribble);
+	z-index: var(--layer-overlays-user-scribble);
 }
 
 .tl-user-brush {
-	z-index: var(--tl-layer-overlays-user-brush);
+	z-index: var(--layer-overlays-user-brush);
 }
 
 .tl-user-handles {
-	z-index: var(--tl-layer-overlays-user-handles);
+	z-index: var(--layer-overlays-user-handles);
 }
 
 .tl-user-snapline {
-	z-index: var(--tl-layer-overlays-user-snapline);
+	z-index: var(--layer-overlays-user-snapline);
 }
 
 .tl-selection__fg {
 	pointer-events: none;
-	z-index: var(--tl-layer-overlays-selection-fg);
+	z-index: var(--layer-overlays-selection-fg);
 }
 
 .tl-user-indicator__hint {
-	z-index: var(--tl-layer-overlays-user-indicator-hint);
+	z-index: var(--layer-overlays-user-indicator-hint);
 	stroke-width: calc(2.5px * var(--tl-scale));
 }
 
 .tl-custom-overlays {
-	z-index: var(--tl-layer-overlays-custom);
+	z-index: var(--layer-overlays-custom);
 }
 
 /* behind collaborator cursor */
 .tl-collaborator__cursor-hint {
-	z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
+	z-index: var(--layer-overlays-collaborator-cursor-hint);
 }
 
 .tl-collaborator__cursor {
-	z-index: var(--tl-layer-overlays-collaborator-cursor);
+	z-index: var(--layer-overlays-collaborator-cursor);
 }
 
 .tl-cursor {
@@ -451,32 +446,32 @@ input,
 .tl-selection__fg__outline {
 	fill: none;
 	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
+	stroke: var(--color-selection-stroke);
 	stroke-width: calc(1.5px * var(--tl-scale));
 }
 
 .tl-corner-handle {
 	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
-	fill: var(--tl-color-background);
+	stroke: var(--color-selection-stroke);
+	fill: var(--color-background);
 	stroke-width: calc(1.5px * var(--tl-scale));
 }
 
 .tl-text-handle {
 	pointer-events: none;
-	fill: var(--tl-color-selection-stroke);
+	fill: var(--color-selection-stroke);
 }
 
 .tl-corner-crop-handle {
 	pointer-events: none;
 	fill: none;
-	stroke: var(--tl-color-selection-stroke);
+	stroke: var(--color-selection-stroke);
 }
 
 .tl-corner-crop-edge-handle {
 	pointer-events: none;
 	fill: none;
-	stroke: var(--tl-color-selection-stroke);
+	stroke: var(--color-selection-stroke);
 }
 
 .tl-mobile-rotate__bg {
@@ -486,8 +481,8 @@ input,
 
 .tl-mobile-rotate__fg {
 	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
-	fill: var(--tl-color-background);
+	stroke: var(--color-selection-stroke);
+	fill: var(--color-background);
 	stroke-width: calc(1.5px * var(--tl-scale));
 }
 
@@ -517,8 +512,8 @@ input,
 	text-overflow: ellipsis;
 	font-size: 12px;
 	font-family: var(--font-body);
-	border-radius: var(--tl-radius-2);
-	color: var(--tl-color-selected-contrast);
+	border-radius: var(--radius-2);
+	color: var(--color-selected-contrast);
 }
 
 .tl-nametag-title {
@@ -536,7 +531,7 @@ input,
 	font-size: 12px;
 	font-family: var(--font-body);
 	text-shadow: var(--tl-text-outline);
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 }
 
 .tl-nametag-chat {
@@ -545,31 +540,31 @@ input,
 	left: 13px;
 	width: fit-content;
 	height: fit-content;
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 	white-space: nowrap;
 	position: absolute;
 	padding: 3px 6px;
 	font-size: 12px;
 	font-family: var(--font-body);
 	opacity: 1;
-	border-radius: var(--tl-radius-2);
+	border-radius: var(--radius-2);
 }
 
 .tl-cursor-chat {
 	position: absolute;
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 	white-space: nowrap;
 	padding: 3px 6px;
 	font-size: 12px;
 	font-family: var(--font-body);
 	pointer-events: none;
-	z-index: var(--tl-layer-cursor);
+	z-index: var(--layer-cursor);
 	margin-top: 16px;
 	margin-left: 13px;
 	opacity: 1;
 	border: none;
 	user-select: text;
-	border-radius: var(--tl-radius-2);
+	border-radius: var(--radius-2);
 }
 
 .tl-cursor-chat .tl-cursor-chat__bubble {
@@ -577,13 +572,13 @@ input,
 }
 
 .tl-cursor-chat::selection {
-	background: var(--tl-color-selected);
-	color: var(--tl-color-selected-contrast);
+	background: var(--color-selected);
+	color: var(--color-selected-contrast);
 	text-shadow: none;
 }
 
 .tl-cursor-chat::placeholder {
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 	opacity: 0.7;
 }
 
@@ -654,7 +649,7 @@ input,
 	background: none;
 	border-image: none;
 	border: 0px;
-	caret-color: var(--tl-color-text);
+	caret-color: var(--color-text);
 	color: inherit;
 	column-count: initial !important;
 	display: inline-block;
@@ -686,7 +681,7 @@ input,
 
 .tl-text-measure {
 	position: absolute;
-	z-index: var(--tl-layer-canvas-hidden);
+	z-index: var(--layer-canvas-hidden);
 	top: 0px;
 	left: 0px;
 	opacity: 0;
@@ -749,8 +744,8 @@ input,
 }
 
 .tl-text-input::selection {
-	background: var(--tl-color-selected);
-	color: var(--tl-color-selected-contrast);
+	background: var(--color-selected);
+	color: var(--color-selected-contrast);
 	text-shadow: none;
 }
 
@@ -760,7 +755,7 @@ input,
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 	text-shadow: var(--tl-text-outline);
 	line-height: inherit;
 	position: absolute;
@@ -783,7 +778,8 @@ input,
 	position: static;
 }
 
-.tl-text-wrapper[data-isediting='false'] .tl-text-input {
+.tl-text-wrapper[data-isediting='false'] .tl-text-input,
+.tl-arrow-label[data-isediting='false'] .tl-text-input {
 	opacity: 0;
 	cursor: var(--tl-cursor-default);
 }
@@ -804,7 +800,7 @@ input,
 
 .tl-text-wrapper .tl-text-content {
 	pointer-events: all;
-	z-index: var(--tl-layer-text-content);
+	z-index: var(--layer-text-content);
 }
 
 .tl-text-label__inner > .tl-text-content {
@@ -814,7 +810,7 @@ input,
 	padding: inherit;
 	height: fit-content;
 	width: fit-content;
-	border-radius: var(--tl-radius-1);
+	border-radius: var(--radius-1);
 	max-width: 100%;
 }
 
@@ -827,7 +823,7 @@ input,
 }
 
 .tl-text-wrapper[data-isselected='true'] .tl-text-input {
-	z-index: var(--tl-layer-text-editor);
+	z-index: var(--layer-text-editor);
 	pointer-events: all;
 }
 
@@ -922,7 +918,7 @@ input,
 }
 
 .tl-rich-text a {
-	color: var(--tl-color-primary);
+	color: var(--color-primary);
 	text-decoration: underline;
 }
 
@@ -945,14 +941,14 @@ input,
 }
 
 .tl-theme__dark .tl-rich-text mark {
-	background-color: var(--tl-color-text-highlight);
+	background-color: var(--color-text-highlight);
 	color: currentColor;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
 	@media (color-gamut: p3) {
 		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
-			background-color: var(--tl-color-text-highlight-p3);
+			background-color: var(--color-text-highlight-p3);
 		}
 	}
 }
@@ -964,26 +960,26 @@ input,
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
-	background-color: var(--tl-color-background);
-	color: var(--tl-color-text-1);
+	background-color: var(--color-background);
+	color: var(--color-text-1);
 	height: 100%;
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	gap: var(--tl-space-2);
+	gap: var(--space-2);
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: tl-fade-in 0.2s ease-in-out forwards;
+	animation: fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
-	z-index: var(--tl-layer-canvas-blocker);
+	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes tl-fade-in {
+@keyframes fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -992,19 +988,6 @@ input,
 	}
 }
 
-.tl-spinner {
-	animation: tl-spin 1s linear infinite;
-}
-
-@keyframes tl-spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {
@@ -1013,8 +996,8 @@ input,
 }
 
 .tl-brush__default {
-	stroke: var(--tl-color-brush-stroke);
-	fill: var(--tl-color-brush-fill);
+	stroke: var(--color-brush-stroke);
+	fill: var(--color-brush-fill);
 }
 
 /* -------------------- Scribble -------------------- */
@@ -1029,13 +1012,13 @@ input,
 /* ---------------------- Snaps --------------------- */
 
 .tl-snap-indicator {
-	stroke: var(--tl-color-snap);
+	stroke: var(--color-snap);
 	stroke-width: calc(1px * var(--tl-scale));
 	fill: none;
 }
 
 .tl-snap-point {
-	stroke: var(--tl-color-snap);
+	stroke: var(--color-snap);
 	stroke-width: calc(1px * var(--tl-scale));
 	fill: none;
 }
@@ -1055,7 +1038,7 @@ input,
 	justify-content: center;
 	font-size: 12px;
 	font-weight: 400;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	padding: 13px;
 	cursor: var(--tl-cursor-pointer);
 	border: none;
@@ -1073,13 +1056,13 @@ input,
 	display: block;
 	width: calc(100% - 12px);
 	height: calc(100% - 12px);
-	border-radius: var(--tl-radius-1);
-	background-color: var(--tl-color-background);
+	border-radius: var(--radius-1);
+	background-color: var(--color-background);
 	pointer-events: none;
 }
 
 .tl-hyperlink-button:focus-visible {
-	color: var(--tl-color-selected);
+	color: var(--color-selected);
 }
 
 .tl-hyperlink__icon {
@@ -1106,8 +1089,8 @@ input,
 }
 
 .tl-handle__fg {
-	fill: var(--tl-color-selected-contrast);
-	stroke: var(--tl-color-selection-stroke);
+	fill: var(--color-selected-contrast);
+	stroke: var(--color-selection-stroke);
 	stroke-width: calc(1.5px * var(--tl-scale));
 	pointer-events: none;
 }
@@ -1117,7 +1100,7 @@ input,
 }
 
 .tl-handle__clone > .tl-handle__fg {
-	fill: var(--tl-color-selection-stroke);
+	fill: var(--color-selection-stroke);
 	stroke: none;
 }
 
@@ -1127,7 +1110,7 @@ input,
 
 @media (pointer: coarse) {
 	.tl-handle__bg:active {
-		fill: var(--tl-color-selection-fill);
+		fill: var(--color-selection-fill);
 	}
 
 	.tl-handle__create {
@@ -1183,20 +1166,20 @@ input,
 	stroke-linejoin: round;
 	/* content-visibility: auto; */
 	transform-origin: top left;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 }
 
 /* -------------------- Group shape ------------------ */
 
 .tl-group {
-	stroke: var(--tl-color-text);
+	stroke: var(--color-text);
 	stroke-width: calc(1px * var(--tl-scale));
 	opacity: 0.5;
 }
 
 /* --------------------- Arrow shape -------------------- */
 
-.tl-shape[data-shape-type='arrow'] .tl-text-label {
+.tl-arrow-label {
 	position: absolute;
 	top: -1px;
 	left: -1px;
@@ -1207,38 +1190,56 @@ input,
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 	text-shadow: var(--tl-text-outline);
 }
 
-.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
-	border-radius: var(--tl-radius-1);
+.tl-arrow-label[data-isediting='true'] p {
+	opacity: 0;
+}
+
+.tl-arrow-label__inner {
+	border-radius: var(--radius-1);
 	box-sizing: content-box;
+	position: relative;
 	height: max-content;
 	width: max-content;
+	pointer-events: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-.tl-shape[data-shape-type='arrow'] .tl-text {
+.tl-arrow-label .tl-arrow {
+	position: relative;
 	height: max-content;
+	padding: inherit;
+	overflow: visible;
+}
+
+.tl-arrow-label textarea {
+	padding: inherit;
+	/* Don't allow textarea to be zero width */
+	min-width: 4px;
 }
 
 .tl-arrow-hint {
-	stroke: var(--tl-color-text-1);
+	stroke: var(--color-text-1);
 	fill: none;
 	stroke-linecap: round;
 	overflow: visible;
 }
 
 .tl-arrow-hint-handle {
-	fill: var(--tl-color-selected-contrast);
-	stroke: var(--tl-color-selection-stroke);
+	fill: var(--color-selected-contrast);
+	stroke: var(--color-selection-stroke);
 	stroke-width: calc(1.5px * var(--tl-scale));
 	r: calc(4px * var(--tl-scale));
 }
 
 .tl-arrow-hint-snap {
 	stroke: transparent;
-	fill: var(--tl-color-selection-fill);
+	fill: var(--color-selection-fill);
 	r: calc(12px * var(--tl-scale));
 }
 
@@ -1258,40 +1259,40 @@ input,
 	width: 100%;
 	height: 100%;
 	position: relative;
-	border: 1px solid var(--tl-color-panel-contrast);
-	background-color: var(--tl-color-panel);
-	border-radius: var(--tl-radius-2);
+	border: 1px solid var(--color-panel-contrast);
+	background-color: var(--color-panel);
+	border-radius: var(--radius-2);
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
 }
 
 .tl-bookmark__container--safariExport {
-	border: 1px solid var(--tl-color-divider);
+	border: 1px solid var(--color-divider);
 }
 
 .tl-bookmark__image_container {
 	flex: 1 1 100%;
 	overflow: hidden;
-	border-top-left-radius: var(--tl-radius-1);
-	border-top-right-radius: var(--tl-radius-1);
+	border-top-left-radius: var(--radius-1);
+	border-top-right-radius: var(--radius-1);
 	width: 100%;
 	height: 100%;
 	display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;
-	box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
+	box-shadow: inset 0px 0px 0px 1px var(--color-divider);
 }
 
 .tl-bookmark__image_container > .tl-hyperlink-button::after {
-	background-color: var(--tl-color-panel);
+	background-color: var(--color-panel);
 }
 
 .tl-bookmark__placeholder {
 	width: 100%;
 	height: 100%;
-	background-color: var(--tl-color-muted-2);
-	border-bottom: 1px solid var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
+	border-bottom: 1px solid var(--color-muted-2);
 }
 
 .tl-bookmark__image {
@@ -1299,12 +1300,12 @@ input,
 	height: 100%;
 	object-fit: cover;
 	object-position: center;
-	border-bottom: 1px solid var(--tl-color-muted-2);
+	border-bottom: 1px solid var(--color-muted-2);
 }
 
 .tl-bookmark__copy_container {
-	background-color: var(--tl-color-muted-0);
-	padding: var(--tl-space-4);
+	background-color: var(--color-muted-0);
+	padding: var(--space-4);
 	pointer-events: all;
 	display: flex;
 	flex-direction: column;
@@ -1324,7 +1325,7 @@ input,
 	font-size: 16px;
 	line-height: 1.6;
 	font-weight: bold;
-	padding-bottom: var(--tl-space-2);
+	padding-bottom: var(--space-2);
 	overflow: hidden;
 	max-height: calc((16px * 1.6) * 2);
 	-webkit-box-orient: vertical;
@@ -1344,19 +1345,19 @@ input,
 	line-clamp: 3;
 	text-overflow: ellipsis;
 	display: -webkit-box;
-	color: var(--tl-color-text-2);
-	margin: var(--tl-space-2) 0px;
+	color: var(--color-text-2);
+	margin: var(--space-2) 0px;
 }
 
 .tl-bookmark__heading + .tl-bookmark__link,
 .tl-bookmark__description + .tl-bookmark__link {
-	margin-top: var(--tl-space-3);
+	margin-top: var(--space-3);
 }
 .tl-bookmark__link {
 	font-size: 12px;
 	pointer-events: all;
 	display: flex;
-	color: var(--tl-color-text-2);
+	color: var(--color-text-2);
 	align-items: center;
 	cursor: var(--tl-cursor-pointer);
 	width: fit-content;
@@ -1398,7 +1399,7 @@ input,
 	width: 100%;
 	height: 100%;
 	pointer-events: all;
-	/* background-color: var(--tl-color-background); */
+	/* background-color: var(--color-background); */
 
 	display: flex;
 	justify-content: center;
@@ -1427,7 +1428,7 @@ input,
 	height: 100%;
 	pointer-events: all;
 	opacity: 1;
-	z-index: var(--tl-layer-text-container);
+	z-index: var(--layer-text-container);
 	border-radius: 1px;
 }
 
@@ -1443,22 +1444,22 @@ input,
 }
 
 .tl-frame__creating {
-	stroke: var(--tl-color-selected);
+	stroke: var(--color-selected);
 	fill: none;
 }
 
 .tl-frame-heading {
-	--tl-frame-padding-x: 6px;
-	--tl-frame-height: 24px;
-	--tl-frame-minimum-width: 32px;
-	--tl-frame-offset-width: 16px;
+	--frame-padding-x: 6px;
+	--frame-height: 24px;
+	--frame-minimum-width: 32px;
+	--frame-offset-width: 16px;
 	display: flex;
 	align-items: center;
 	position: absolute;
 	transform-origin: 0% 100%;
 	overflow: hidden;
 	max-width: 100%;
-	min-width: var(--tl-frame-minimum-width);
+	min-width: var(--frame-minimum-width);
 	height: auto;
 	font-size: 12px;
 	padding-bottom: 4px;
@@ -1470,18 +1471,18 @@ input,
 	/* scale from bottom left corner so we can pin it to the top left corner of the frame */
 	transform-origin: 0% 100%;
 	display: flex;
-	height: var(--tl-frame-height);
+	height: var(--frame-height);
 	width: 100%;
 	align-items: center;
-	border-radius: var(--tl-radius-1);
+	border-radius: var(--radius-1);
 }
 
 .tl-frame-label {
 	pointer-events: all;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	padding: 0px var(--tl-frame-padding-x);
-	border-radius: var(--tl-radius-1);
+	padding: 0px var(--frame-padding-x);
+	border-radius: var(--radius-1);
 	position: relative;
 	font-size: inherit;
 	white-space: pre;
@@ -1491,12 +1492,12 @@ input,
 	color: transparent;
 	white-space: pre;
 	width: auto;
-	min-width: var(--tl-frame-minimum-width);
+	min-width: var(--frame-minimum-width);
 	height: 100%;
 	overflow: visible;
-	background-color: var(--tl-color-panel);
-	border-color: var(--tl-color-selected);
-	box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
+	background-color: var(--color-panel);
+	border-color: var(--color-selected);
+	box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
 }
 
 .tl-frame-name-input {
@@ -1504,7 +1505,7 @@ input,
 	border: none;
 	background: none;
 	outline: none;
-	padding: 0px var(--tl-frame-padding-x);
+	padding: 0px var(--frame-padding-x);
 	inset: 0px;
 	height: 100%;
 	width: 100%;
@@ -1512,8 +1513,8 @@ input,
 	font-family: inherit;
 	font-weight: inherit;
 	width: 100%;
-	color: var(--tl-color-text-1);
-	border-radius: var(--tl-radius-1);
+	color: var(--color-text-1);
+	border-radius: var(--radius-1);
 	user-select: all;
 	-webkit-user-select: text;
 	white-space: pre;
@@ -1533,7 +1534,7 @@ input,
 
 .tl-embed {
 	border: none;
-	border-radius: var(--tl-radius-2);
+	border-radius: var(--radius-2);
 }
 
 /* -------------- Shape error boundary -------------- */
@@ -1541,11 +1542,11 @@ input,
 .tl-shape-error-boundary {
 	width: 100%;
 	height: 100%;
-	background-color: var(--tl-color-muted-1);
+	background-color: var(--color-muted-1);
 	border-width: calc(1px * var(--tl-scale));
-	border-color: var(--tl-color-muted-1);
+	border-color: var(--color-muted-1);
 	border-style: solid;
-	border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
+	border-radius: calc(var(--radius-1) * var(--tl-scale));
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -1554,7 +1555,7 @@ input,
 	position: relative;
 	pointer-events: all;
 	overflow: hidden;
-	padding: var(--tl-space-2);
+	padding: var(--space-2);
 }
 
 .tl-shape-error-boundary::before {
@@ -1562,7 +1563,7 @@ input,
 	content: 'Error';
 	font-size: 12px;
 	font-family: inherit;
-	color: var(--tl-color-text-0);
+	color: var(--color-text-0);
 }
 
 /* ----------------- Error boundary ----------------- */
@@ -1573,9 +1574,9 @@ input,
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--tl-space-4);
-	background-color: var(--tl-color-background);
-	color: var(--tl-color-text-1);
+	padding: var(--space-4);
+	background-color: var(--color-background);
+	color: var(--color-text-1);
 	position: absolute;
 }
 
@@ -1584,8 +1585,8 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: var(--tl-layer-error-overlay);
-	background-color: var(--tl-color-overlay);
+	z-index: var(--layer-error-overlay);
+	background-color: var(--color-overlay);
 }
 
 .tl-error-boundary__content * {
@@ -1600,7 +1601,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: var(--tl-layer-error-canvas);
+	z-index: var(--layer-error-canvas);
 }
 
 /* some browsers seem to have some weird interactions between stacking contexts
@@ -1613,7 +1614,7 @@ it from receiving any pointer events or affecting the cursor. */
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: var(--tl-layer-error-canvas-after);
+	z-index: var(--layer-error-canvas-after);
 	pointer-events: all;
 }
 
@@ -1623,16 +1624,16 @@ it from receiving any pointer events or affecting the cursor. */
 	max-width: 100%;
 	width: 400px;
 	max-height: 100%;
-	background-color: var(--tl-color-panel);
+	background-color: var(--color-panel);
 	padding: 16px;
 	border-radius: 16px;
-	box-shadow: var(--tl-shadow-2);
+	box-shadow: var(--shadow-2);
 	font-size: 14px;
 	font-weight: 400;
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
-	z-index: var(--tl-layer-error-content);
+	z-index: var(--layer-error-content);
 	gap: 12px;
 }
 
@@ -1647,10 +1648,10 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tl-error-boundary__content h4 {
-	border: 1px solid var(--tl-color-low-border);
+	border: 1px solid var(--color-low-border);
 	margin: -6px 0 0 0;
-	padding: var(--tl-space-5);
-	border-radius: var(--tl-radius-2);
+	padding: var(--space-5);
+	border-radius: var(--radius-2);
 	font-weight: normal;
 }
 
@@ -1660,10 +1661,10 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tl-error-boundary__content pre {
-	background-color: var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
 	margin-top: 0;
-	padding: var(--tl-space-5);
-	border-radius: var(--tl-radius-2);
+	padding: var(--space-5);
+	border-radius: var(--radius-2);
 	overflow: auto;
 	font-size: 12px;
 	max-height: 320px;
@@ -1675,15 +1676,15 @@ it from receiving any pointer events or affecting the cursor. */
 	font-family: inherit;
 	font-size: 14px;
 	font-weight: 500;
-	padding: var(--tl-space-4);
-	border-radius: var(--tl-radius-3);
+	padding: var(--space-4);
+	border-radius: var(--radius-3);
 	cursor: var(--tl-cursor-pointer);
 	color: inherit;
 	background-color: transparent;
 }
 
 .tl-error-boundary__content a {
-	color: var(--tl-color-selected);
+	color: var(--color-selected);
 	font-weight: 500;
 	text-decoration: none;
 }
@@ -1695,31 +1696,31 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tl-error-boundary__content__error button {
 	position: absolute;
-	top: var(--tl-space-2);
-	right: var(--tl-space-2);
+	top: var(--space-2);
+	right: var(--space-2);
 	font-size: 12px;
-	padding: var(--tl-space-2) var(--tl-space-3);
-	background-color: var(--tl-color-panel);
-	border-radius: var(--tl-radius-1);
+	padding: var(--space-2) var(--space-3);
+	background-color: var(--color-panel);
+	border-radius: var(--radius-1);
 }
 
 .tl-error-boundary__content__actions {
 	display: flex;
 	justify-content: space-between;
-	gap: var(--tl-space-4);
+	gap: var(--space-4);
 	margin: 0px;
 	margin-left: -4px;
 }
 .tl-error-boundary__content__actions__group {
 	display: flex;
-	gap: var(--tl-space-4);
+	gap: var(--space-4);
 }
 .tl-error-boundary__content .tl-error-boundary__reset {
-	color: var(--tl-color-danger);
+	color: var(--color-danger);
 }
 .tl-error-boundary__content .tl-error-boundary__refresh {
-	background-color: var(--tl-color-primary);
-	color: var(--tl-color-selected-contrast);
+	background-color: var(--color-primary);
+	color: var(--color-selected-contrast);
 }
 .tl-container__focused:not(.tl-container__no-focus-ring)
 	.tlui-button.tl-error-boundary__refresh:focus-visible {
@@ -1731,7 +1732,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tl-hit-test-blocker {
 	position: absolute;
-	z-index: var(--tl-layer-canvas-blocker);
+	z-index: var(--layer-canvas-blocker);
 	inset: 0px;
 	width: 100%;
 	height: 100%;
@@ -1751,32 +1752,32 @@ it from receiving any pointer events or affecting the cursor. */
 
 	.tl-handle__bg:hover {
 		cursor: var(--tl-cursor-grab);
-		fill: var(--tl-color-selection-fill);
+		fill: var(--color-selection-fill);
 	}
 
 	.tl-bookmark__link:hover {
-		color: var(--tl-color-selected);
+		color: var(--color-selected);
 	}
 
 	.tl-hyperlink-button:hover {
-		color: var(--tl-color-selected);
+		color: var(--color-selected);
 	}
 
 	.tl-error-boundary__content button:hover {
-		background-color: var(--tl-color-low);
+		background-color: var(--color-low);
 	}
 	.tl-error-boundary__content a:hover {
-		color: var(--tl-color-text-1);
+		color: var(--color-text-1);
 	}
 	.tl-error-boundary__content .tl-error-boundary__refresh:hover {
-		background-color: var(--tl-color-primary);
+		background-color: var(--color-primary);
 		opacity: 0.9;
 	}
 
 	/* These three rules help preserve clicking into specific points in text areas *while*
  * already in edit mode when jumping from shape to shape. */
 	.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
-		z-index: var(--tl-layer-text-editor);
+		z-index: var(--layer-text-editor);
 		pointer-events: all;
 	}
 }
@@ -1784,15 +1785,15 @@ it from receiving any pointer events or affecting the cursor. */
 /* @tldraw/ui */
 
 .tl-container {
-	--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;
+	--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;
 }
 
 /* Button */
@@ -1816,23 +1817,23 @@ it from receiving any pointer events or affecting the cursor. */
 	text-rendering: optimizeLegibility;
 	font-size: 12px;
 	gap: 0px;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	z-index: 0;
 }
 
 .tlui-button:disabled {
-	color: var(--tl-color-text-3);
+	color: var(--color-text-3);
 	text-shadow: none;
 	cursor: default;
 }
 
 .tlui-button:disabled .tlui-kbd {
-	color: var(--tl-color-text-3);
+	color: var(--color-text-3);
 }
 
 .tlui-button > * {
 	position: relative;
-	z-index: var(--tl-layer-above);
+	z-index: var(--layer-above);
 }
 
 .tlui-button__label {
@@ -1848,7 +1849,7 @@ it from receiving any pointer events or affecting the cursor. */
  */
 .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
 	border-radius: 10px;
-	outline: 2px solid var(--tl-color-focus);
+	outline: 2px solid var(--color-focus);
 	outline-offset: -5px;
 }
 .tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
@@ -1856,7 +1857,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
 	border-radius: 10px;
-	outline: 2px solid var(--tl-color-focus);
+	outline: 2px solid var(--color-focus);
 	outline-offset: -5px;
 }
 
@@ -1865,8 +1866,8 @@ it from receiving any pointer events or affecting the cursor. */
 	content: '';
 	position: absolute;
 	inset: 4px;
-	border-radius: var(--tl-radius-2);
-	background: var(--tl-color-muted-2);
+	border-radius: var(--radius-2);
+	background: var(--color-muted-2);
 	opacity: 0;
 }
 
@@ -1876,18 +1877,18 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-button[data-isactive='true']::after,
 .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
-	background: var(--tl-color-hint);
+	background: var(--color-hint);
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left'] {
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tlui-button[aria-expanded='true'][data-direction='left']::after {
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 
@@ -1901,18 +1902,18 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-button__icon + .tlui-button__label {
-	margin-left: var(--tl-space-2);
+	margin-left: var(--space-2);
 }
 
 /* Low button  */
 
 .tlui-button__low {
-	border-radius: var(--tl-radius-3);
-	background-color: var(--tl-color-low);
+	border-radius: var(--radius-3);
+	background-color: var(--color-low);
 }
 
 .tlui-button__low::after {
-	background-color: var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
 	opacity: 0;
 }
 
@@ -1925,25 +1926,31 @@ it from receiving any pointer events or affecting the cursor. */
 /* Primary / danger buttons */
 
 .tlui-button__primary {
-	color: var(--tl-color-primary);
+	color: var(--color-primary);
 }
 
 .tlui-button__danger {
-	color: var(--tl-color-danger);
+	color: var(--color-danger);
 	text-shadow: none;
 }
 
 @media (hover: hover) {
 	.tlui-button__primary:not(:disabled, :focus-visible):hover {
-		color: var(--tl-color-primary);
+		color: var(--color-primary);
 	}
 
 	.tlui-button__danger:not(:disabled, :focus-visible):hover {
-		color: var(--tl-color-danger);
+		color: var(--color-danger);
 		text-shadow: none;
 	}
 }
 
+/* Panel button */
+
+.tlui-button__panel {
+	position: relative;
+}
+
 /* Menu button */
 
 .tlui-button__menu {
@@ -1956,7 +1963,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-button__menu::after {
 	inset: 4px;
-	border-radius: var(--tl-radius-2);
+	border-radius: var(--radius-2);
 }
 
 .tlui-button__menu > .tlui-icon + .tlui-button__label {
@@ -1984,26 +1991,18 @@ it from receiving any pointer events or affecting the cursor. */
 
 /* Tool lock button */
 
-.tlui-main-toolbar__lock-button {
+.tlui-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 {
+.tlui-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
 	inset: 4px;
@@ -2015,6 +2014,16 @@ it from receiving any pointer events or affecting the cursor. */
 	position: relative;
 	height: 48px;
 	width: 48px;
+	margin-left: -2px;
+	margin-right: -2px;
+}
+
+.tlui-button__tool:nth-of-type(1) {
+	margin-left: 0px;
+}
+
+.tlui-button__tool:nth-last-of-type(1) {
+	margin-right: 0px;
 }
 
 .tlui-button__tool::after {
@@ -2023,64 +2032,69 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-button__tool[aria-pressed='true'] {
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 }
 
 .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 }
 
 .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
-	background: var(--tl-color-selected);
+	background: var(--color-selected);
 	opacity: 1;
 }
 
-.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
+.tlui-layout__mobile .tlui-button__tool {
 	height: 48px;
 	width: 43px;
 }
 
-.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
+.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
 	height: 16px;
 	width: 16px;
 }
 
-/* Row layout */
+/* Button Row */
 
-.tlui-row {
+.tlui-buttons__horizontal {
 	display: flex;
 	flex-direction: row;
-	padding: 0 2px;
 }
-.tlui-row > * {
+.tlui-buttons__horizontal > * {
 	margin-left: -2px;
 	margin-right: -2px;
 }
-
-/* Column layout */
-
-.tlui-column {
-	display: flex;
-	flex-direction: column;
-	padding: 2px 0;
+.tlui-buttons__horizontal > *:nth-child(1) {
+	margin-left: 0px;
 }
-.tlui-column > * {
-	margin-top: -2px;
-	margin-bottom: -2px;
+.tlui-buttons__horizontal > *:nth-last-child(1) {
+	margin-right: 0px;
 }
 
-/* Grid layout */
+/* Button Grid */
 
-.tlui-grid {
+.tlui-buttons__grid {
 	display: grid;
-	grid-template-columns: repeat(4, 1fr);
+	grid-template-columns: repeat(4, auto);
 	grid-auto-flow: row;
 	overflow: hidden;
-	padding: 2px;
 }
-.tlui-grid > * {
+.tlui-buttons__grid > .tlui-button {
 	margin: -2px;
 }
+.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
+.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
+	margin-right: 0px;
+}
+.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
+	margin-left: 0px;
+}
+.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
+	margin-top: 0px;
+}
+.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
+	margin-bottom: 0px;
+}
 
 /* Zoom button */
 
@@ -2104,9 +2118,9 @@ it from receiving any pointer events or affecting the cursor. */
 	pointer-events: none;
 	user-select: none;
 	contain: strict;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	transform: translate3d(0, 0, 0);
-	--tl-sab: env(safe-area-inset-bottom);
+	--sab: env(safe-area-inset-bottom);
 	font-weight: 500;
 	line-height: 1.6;
 	-webkit-font-smoothing: antialiased;
@@ -2159,11 +2173,11 @@ it from receiving any pointer events or affecting the cursor. */
 	justify-content: flex-start;
 	align-items: flex-start;
 	width: min-content;
-	gap: var(--tl-space-3);
-	margin: var(--tl-space-2) var(--tl-space-3);
+	gap: var(--space-3);
+	margin: var(--space-2) var(--space-3);
 	white-space: nowrap;
 	pointer-events: none;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 }
 
 /* ---------------------- Icon ---------------------- */
@@ -2191,7 +2205,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-slider__container {
 	width: 100%;
-	padding: 0px var(--tl-space-4);
+	padding: 0px var(--space-4);
 }
 
 .tlui-slider {
@@ -2217,7 +2231,7 @@ it from receiving any pointer events or affecting the cursor. */
 	content: '';
 	height: 3px;
 	width: 100%;
-	background-color: var(--tl-color-muted-1);
+	background-color: var(--color-muted-1);
 	border-radius: 14px;
 }
 
@@ -2226,7 +2240,7 @@ it from receiving any pointer events or affecting the cursor. */
 	top: calc(50% - 2px);
 	left: 0px;
 	height: 3px;
-	background-color: var(--tl-color-selected);
+	background-color: var(--color-selected);
 	border-radius: 14px;
 }
 
@@ -2238,16 +2252,16 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 18px;
 	position: relative;
 	top: -1px;
-	background-color: var(--tl-color-panel);
+	background-color: var(--color-panel);
 	border-radius: 999px;
-	box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
+	box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
 }
 
 .tlui-slider__thumb:active {
 	cursor: grabbing;
 	box-shadow:
-		inset 0px 0px 0px 2px var(--tl-color-text-1),
-		var(--tl-shadow-1);
+		inset 0px 0px 0px 2px var(--color-text-1),
+		var(--shadow-1);
 }
 
 /* ---------------------- Input --------------------- */
@@ -2256,7 +2270,7 @@ it from receiving any pointer events or affecting the cursor. */
 	background: none;
 	margin: 0px;
 	position: relative;
-	z-index: var(--tl-layer-above);
+	z-index: var(--layer-above);
 	height: 40px;
 	max-height: 40px;
 	display: flex;
@@ -2265,8 +2279,8 @@ it from receiving any pointer events or affecting the cursor. */
 	font-family: inherit;
 	font-size: 12px;
 	font-weight: inherit;
-	color: var(--tl-color-text-1);
-	padding: var(--tl-space-4);
+	color: var(--color-text-1);
+	padding: var(--space-4);
 	padding-left: 0px;
 	border: none;
 	outline: none;
@@ -2282,8 +2296,8 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 44px;
 	display: flex;
 	align-items: center;
-	gap: var(--tl-space-4);
-	color: var(--tl-color-text);
+	gap: var(--space-4);
+	color: var(--color-text);
 }
 
 .tlui-input__wrapper > .tlui-icon {
@@ -2315,7 +2329,7 @@ it from receiving any pointer events or affecting the cursor. */
 	grid-auto-columns: minmax(1em, auto);
 	align-self: bottom;
 	color: currentColor;
-	margin-left: var(--tl-space-4);
+	margin-left: var(--space-4);
 }
 
 .tlui-kbd > span {
@@ -2332,13 +2346,13 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-kbd:not(:last-child) {
-	margin-right: var(--tl-space-2);
+	margin-right: var(--space-2);
 }
 
 /* Focus Mode Button */
 
 .tlui-focus-button {
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	pointer-events: all;
 }
 
@@ -2349,16 +2363,16 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-menu {
-	z-index: var(--tl-layer-menus);
+	z-index: var(--layer-menus);
 	height: fit-content;
 	width: fit-content;
-	border-radius: var(--tl-radius-3);
+	border-radius: var(--radius-3);
 	pointer-events: all;
 	touch-action: auto;
 	overflow-y: auto;
 	overscroll-behavior: none;
-	background-color: var(--tl-color-panel);
-	box-shadow: var(--tl-shadow-3);
+	background-color: var(--color-panel);
+	box-shadow: var(--shadow-3);
 }
 
 .tlui-menu::-webkit-scrollbar {
@@ -2376,7 +2390,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-menu__group {
-	border-bottom: 1px solid var(--tl-color-divider);
+	border-bottom: 1px solid var(--color-divider);
 }
 .tlui-menu__group:nth-last-of-type(1) {
 	border-bottom: none;
@@ -2386,23 +2400,23 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	}
 }
 
@@ -2427,7 +2441,7 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-menu-click-capture {
 	position: fixed;
 	inset: 0;
-	z-index: var(--tl-layer-menu-click-capture);
+	z-index: var(--layer-menu-click-capture);
 }
 
 /* --------------------- Popover -------------------- */
@@ -2443,10 +2457,10 @@ it from receiving any pointer events or affecting the cursor. */
 	max-height: calc(var(--radix-popover-content-available-height) - 8px);
 	margin: 0px;
 	border: none;
-	border-radius: var(--tl-radius-3);
-	background-color: var(--tl-color-panel);
-	box-shadow: var(--tl-shadow-3);
-	z-index: var(--tl-layer-menus);
+	border-radius: var(--radius-3);
+	background-color: var(--color-panel);
+	box-shadow: var(--shadow-3);
+	z-index: var(--layer-menus);
 	overflow: hidden;
 	overflow-y: auto;
 	touch-action: auto;
@@ -2459,22 +2473,22 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-menu-zone {
 	position: relative;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	width: fit-content;
-	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);
+	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);
 }
 
 .tlui-menu-zone *[data-state='open']::after {
-	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
@@ -2500,8 +2514,8 @@ it from receiving any pointer events or affecting the cursor. */
 	align-items: center;
 	width: 100%;
 	height: 40px;
-	padding-left: var(--tl-space-4);
-	border-bottom: 1px solid var(--tl-color-divider);
+	padding-left: var(--space-4);
+	border-bottom: 1px solid var(--color-divider);
 }
 
 .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
@@ -2509,7 +2523,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-page-menu__header__title {
-	color: var(--tl-color-text);
+	color: var(--color-text);
 	font-size: 12px;
 	flex-grow: 2;
 }
@@ -2594,7 +2608,7 @@ it from receiving any pointer events or affecting the cursor. */
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 }
 
 .tlui-page_menu__item__sortable {
@@ -2607,7 +2621,7 @@ it from receiving any pointer events or affecting the cursor. */
 	flex-direction: row;
 	align-items: center;
 	overflow: hidden;
-	z-index: var(--tl-layer-above);
+	z-index: var(--layer-above);
 }
 
 .tlui-page_menu__item__sortable__title {
@@ -2619,7 +2633,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-page_menu__item__sortable:focus-visible {
-	z-index: var(--tl-layer-focused-input);
+	z-index: var(--layer-focused-input);
 }
 
 .tlui-page_menu__item__sortable__handle {
@@ -2628,7 +2642,7 @@ it from receiving any pointer events or affecting the cursor. */
 	min-width: 0px;
 	height: 40px;
 	cursor: grab;
-	color: var(--tl-color-text-3);
+	color: var(--color-text-3);
 	flex-shrink: 0;
 	margin-right: -9px;
 }
@@ -2670,13 +2684,13 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--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(--tl-color-muted-2) 100%);
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
@@ -2712,7 +2726,7 @@ it from receiving any pointer events or affecting the cursor. */
 	top: 48px;
 	left: -9999px;
 	padding: 8px 16px;
-	z-index: var(--tl-layer-toasts);
+	z-index: var(--layer-toasts);
 }
 
 .tl-skip-to-main-content:focus {
@@ -2724,17 +2738,17 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-offline-indicator {
 	display: flex;
 	flex-direction: row;
-	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);
+	gap: var(--space-3);
+	color: var(--color-text);
+	background-color: var(--color-low);
+	border: 3px solid var(--color-background);
+	padding: 0px var(--space-5);
 	height: 42px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: tl-fade-in;
+	animation: fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -2743,10 +2757,10 @@ it from receiving any pointer events or affecting the cursor. */
 /* ------------------- Style panel ------------------ */
 
 .tlui-style-panel__wrapper {
-	box-shadow: var(--tl-shadow-2);
-	border-radius: var(--tl-radius-3);
+	box-shadow: var(--shadow-2);
+	border-radius: var(--radius-3);
 	pointer-events: all;
-	background-color: var(--tl-color-panel);
+	background-color: var(--color-panel);
 	height: fit-content;
 	max-height: 100%;
 	margin: 8px;
@@ -2755,7 +2769,7 @@ it from receiving any pointer events or affecting the cursor. */
 	overscroll-behavior: none;
 	overflow-y: auto;
 	overflow-x: hidden;
-	color: var(--tl-color-text);
+	color: var(--color-text);
 }
 /* if the style panel is the only child (ie no share menu), increase the margin */
 .tlui-style-panel__wrapper:only-child {
@@ -2764,18 +2778,12 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-style-panel {
 	position: relative;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	pointer-events: all;
 	width: 148px;
 	max-width: 148px;
 }
 
-.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
-	border-radius: 10px;
-	outline: 2px solid var(--tl-color-text);
-	outline-offset: -5px;
-}
-
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -2791,7 +2799,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
-	border-bottom: 1px solid var(--tl-color-divider);
+	border-bottom: 1px solid var(--color-divider);
 }
 
 .tlui-style-panel__section:empty {
@@ -2800,19 +2808,23 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
-	border-bottom: 1px solid var(--tl-color-divider);
+	border-bottom: 1px solid var(--color-divider);
 }
 
-.tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+.tlui-style-panel__row {
+	display: flex;
+}
+/* Only really used for the alignment picker */
+.tlui-style-panel__row__extra-button {
+	margin-left: -2px;
 }
 
 .tlui-style-panel__double-select-picker {
 	display: flex;
 	grid-template-columns: 1fr auto;
 	align-items: center;
-	padding-left: var(--tl-space-4);
-	color: var(--tl-color-text-1);
+	padding-left: var(--space-4);
+	color: var(--color-text-1);
 	font-size: 12px;
 }
 
@@ -2826,45 +2838,25 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-style-panel .tlui-button[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 }
 
 @media (hover: hover) {
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	}
 }
 
-/* Accessibility subheadings */
-
-.tlui-style-panel__section .tlui-style-panel__subheading,
-.tlui-style-panel__section__common .tlui-style-panel__subheading,
-.tlui-style-panel__subheading + .tlui-slider__container {
-	margin: 0;
-	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(--tl-space-3);
-}
-
-.tlui-style-panel__subheading + .tlui-slider__container {
-	padding-top: 0px;
-}
-
 /* --------------------- Bottom --------------------- */
 
 .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;
@@ -2876,10 +2868,11 @@ it from receiving any pointer events or affecting the cursor. */
 	display: flex;
 	width: min-content;
 	flex-direction: column;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	pointer-events: all;
 	position: absolute;
 	left: 0px;
+	bottom: 0px;
 }
 
 .tlui-navigation-panel::before {
@@ -2889,16 +2882,30 @@ it from receiving any pointer events or affecting the cursor. */
 	z-index: -1;
 	inset: -2px -2px 0px 0px;
 	border-radius: 0;
-	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);
+	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);
 }
 
 .tlui-navigation-panel[data-a11y='true']::before {
 	display: none;
 }
 
+.tlui-navigation-panel__toggle .tlui-icon {
+	opacity: 0.24;
+}
+
+.tlui-navigation-panel__toggle:active .tlui-icon {
+	opacity: 1;
+}
+
+@media (hover: hover) {
+	.tlui-navigation-panel__toggle:hover .tlui-icon {
+		opacity: 1;
+	}
+}
+
 /* Minimap */
 
 .tlui-minimap {
@@ -2906,7 +2913,7 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 96px;
 	min-height: 96px;
 	overflow: hidden;
-	padding: var(--tl-space-3);
+	padding: var(--space-3);
 	padding-top: 0px;
 }
 
@@ -2919,220 +2926,114 @@ it from receiving any pointer events or affecting the cursor. */
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */
-.tlui-main-toolbar {
+.tlui-toolbar {
 	grid-column: 1 / span 3;
 	grid-row: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-grow: 2;
-}
-
-.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 */
+	padding-bottom: calc(var(--space-3) + var(--sab));
 }
 
 /* Centered Content */
-.tlui-main-toolbar__inner {
+.tlui-toolbar__inner {
 	position: relative;
 	width: fit-content;
 	display: flex;
-	gap: var(--tl-space-3);
-	align-items: flex-start;
-}
-
-.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
-	flex-direction: column;
+	gap: var(--space-3);
+	align-items: flex-end;
 }
 
-.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
+.tlui-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 {
+.tlui-toolbar__extras {
 	position: relative;
-	z-index: var(--tl-layer-above);
+	z-index: var(--layer-above);
+	width: 100%;
 	pointer-events: none;
-	align-self: stretch;
-}
-
-.tlui-main-toolbar__extras:empty {
-	display: none;
-}
-
-.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
-	height: 48px;
 	top: 6px;
+	height: 48px;
 }
 
-.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
-	width: 48px;
-	order: 1;
+.tlui-toolbar__extras:empty {
+	display: none;
 }
 
-.tlui-main-toolbar__extras__controls {
+.tlui-toolbar__extras__controls {
+	display: flex;
 	position: relative;
-	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);
+	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);
 	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 {
-	border-radius: var(--tl-radius-4);
-	z-index: var(--tl-layer-panels);
+.tlui-toolbar__tools {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-radius: var(--radius-4);
+	z-index: var(--layer-panels);
 	pointer-events: all;
 	position: relative;
-	background: var(--tl-color-panel);
-	box-shadow: var(--tl-shadow-2);
+	background: var(--color-panel);
+	box-shadow: var(--shadow-2);
 }
-
-.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-toolbar__tools__list {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 
-.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
+.tlui-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--horizontal .tlui-main-toolbar__overflow {
+.tlui-layout__mobile .tlui-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.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%);
+.tlui-toolbar *[data-state='open']::after {
+	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--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--horizontal *[data-state='open']:not(:hover)::after {
-		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	.tlui-toolbar *[data-state='open']:not(:hover)::after {
+		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--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;
-	}
-}
-
-/* ------------------- Tooltip -------------------- */
-
-.tlui-tooltip {
-	font-size: 12px;
-	padding: 2px 8px;
-	border-radius: 4px;
-	background-color: var(--tl-color-tooltip);
-	box-shadow: none;
-	color: var(--tl-color-text-shadow);
-	max-width: 400px;
-	width: fit-content;
-	text-align: center;
-	will-change: transform, opacity;
-	z-index: 2;
 }
 
-.tlui-tooltip__arrow {
-	fill: var(--tl-color-tooltip);
-	will-change: opacity;
-}
-
-[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
-	z-index: var(--tl-layer-toasts) !important;
-	pointer-events: none;
+.tlui-layout__mobile .tlui-toolbar {
+	transition: transform 0.15s ease-out 0.05s;
 }
 
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {
-	background-color: var(--tl-color-low);
+	background-color: var(--color-low);
 	width: 100%;
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr auto auto auto;
 	justify-content: space-between;
-	padding-left: var(--tl-space-4);
-	border-top: 1px solid var(--tl-color-background);
+	padding-left: var(--space-4);
+	border-top: 1px solid var(--color-background);
 	font-size: 12px;
-	color: var(--tl-color-text-1);
-	z-index: var(--tl-layer-panels);
+	color: var(--color-text-1);
+	z-index: var(--layer-panels);
 	pointer-events: all;
 }
 
@@ -3148,7 +3049,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-debug-panel__fps__slow {
 	font-weight: bold;
-	color: var(--tl-color-danger);
+	color: var(--color-danger);
 }
 
 .tlui-a11y-audit {
@@ -3158,7 +3059,7 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-a11y-audit th,
 .tlui-a11y-audit td {
 	padding: 8px;
-	border: 1px solid var(--tl-color-low-border);
+	border: 1px solid var(--color-low-border);
 }
 
 /* --------------------- Toasts --------------------- */
@@ -3171,10 +3072,10 @@ it from receiving any pointer events or affecting the cursor. */
 	align-items: flex-end;
 	justify-content: flex-end;
 	flex-direction: column;
-	gap: var(--tl-space-3);
+	gap: var(--space-3);
 	pointer-events: none;
-	padding: 0px var(--tl-space-3) 64px 0px;
-	z-index: var(--tl-layer-toasts);
+	padding: 0px var(--space-3) 64px 0px;
+	z-index: var(--layer-toasts);
 }
 
 .tlui-toast__viewport > * {
@@ -3183,34 +3084,34 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-toast__icon {
 	padding-top: 11px;
-	padding-left: var(--tl-space-4);
-	color: var(--tl-color-text-1);
+	padding-left: var(--space-4);
+	color: var(--color-text-1);
 }
 
 .tlui-toast__container {
 	min-width: 200px;
 	display: flex;
 	flex-direction: row;
-	background-color: var(--tl-color-panel);
-	box-shadow: var(--tl-shadow-2);
-	border-radius: var(--tl-radius-3);
+	background-color: var(--color-panel);
+	box-shadow: var(--shadow-2);
+	border-radius: var(--radius-3);
 	font-size: 12px;
 }
 
 .tlui-toast__container[data-severity='success'] .tlui-icon {
-	color: var(--tl-color-success);
+	color: var(--color-success);
 }
 
 .tlui-toast__container[data-severity='info'] .tlui-icon {
-	color: var(--tl-color-info);
+	color: var(--color-info);
 }
 
 .tlui-toast__container[data-severity='warning'] .tlui-icon {
-	color: var(--tl-color-warning);
+	color: var(--color-warning);
 }
 
 .tlui-toast__container[data-severity='error'] .tlui-icon {
-	color: var(--tl-color-danger);
+	color: var(--color-danger);
 }
 
 .tlui-toast__main {
@@ -3219,27 +3120,27 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-toast__content {
-	padding: var(--tl-space-4);
+	padding: var(--space-4);
 	display: flex;
 	line-height: 1.4;
 	flex-direction: column;
-	gap: var(--tl-space-3);
+	gap: var(--space-3);
 }
 
 .tlui-toast__main[data-actions='true'] .tlui-toast__content {
-	padding-bottom: var(--tl-space-2);
+	padding-bottom: var(--space-2);
 }
 
 .tlui-toast__title {
 	font-weight: bold;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	/* this makes the default toast look better */
 	line-height: 16px;
 }
 
 .tlui-toast__description {
-	color: var(--tl-color-text-1);
-	padding: var(--tl-space-3);
+	color: var(--color-text-1);
+	padding: var(--space-3);
 	margin: 0px;
 	padding: 0px;
 }
@@ -3262,11 +3163,11 @@ it from receiving any pointer events or affecting the cursor. */
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: tlui-fade-out 100ms ease-in;
+		animation: hide 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -3279,7 +3180,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: tlui-slide-out 100ms ease-out;
+		animation: swipe-out 100ms ease-out;
 	}
 }
 
@@ -3291,14 +3192,14 @@ it from receiving any pointer events or affecting the cursor. */
 	left: 0px;
 	width: 100%;
 	height: 100%;
-	z-index: var(--tl-layer-canvas-overlays);
-	background-color: var(--tl-color-overlay);
+	z-index: var(--layer-canvas-overlays);
+	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: tl-fade-in 0.12s ease-out;
+	animation: fadeIn 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
-	padding: 0px var(--tl-space-3);
+	padding: 0px var(--space-3);
 }
 
 .tlui-dialog__content {
@@ -3306,9 +3207,9 @@ it from receiving any pointer events or affecting the cursor. */
 	flex-direction: column;
 	position: relative;
 	cursor: default;
-	background-color: var(--tl-color-panel);
-	box-shadow: var(--tl-shadow-3);
-	border-radius: var(--tl-radius-3);
+	background-color: var(--color-panel);
+	box-shadow: var(--shadow-3);
+	border-radius: var(--radius-3);
 	font-size: 12px;
 	overflow: hidden;
 	min-width: 300px;
@@ -3321,9 +3222,9 @@ it from receiving any pointer events or affecting the cursor. */
 	display: flex;
 	align-items: center;
 	flex: 0;
-	z-index: var(--tl-layer-header-footer);
-	padding-left: var(--tl-space-4);
-	color: var(--tl-color-text);
+	z-index: var(--layer-header-footer);
+	padding-left: var(--space-4);
+	color: var(--color-text);
 	height: 40px;
 }
 
@@ -3332,7 +3233,7 @@ it from receiving any pointer events or affecting the cursor. */
 	font-weight: inherit;
 	font-size: 12px;
 	margin: 0px;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 }
 
 .tlui-dialog__header__close {
@@ -3340,16 +3241,16 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-dialog__body {
-	padding: var(--tl-space-4) var(--tl-space-4);
+	padding: var(--space-4) var(--space-4);
 	flex: 0 1;
 	overflow-y: auto;
 	overflow-x: hidden;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	user-select: all;
 	-webkit-user-select: text;
 }
 .tlui-dialog__body a {
-	color: var(--tl-color-selected);
+	color: var(--color-selected);
 }
 
 .tlui-dialog__body ul,
@@ -3357,13 +3258,13 @@ it from receiving any pointer events or affecting the cursor. */
 	padding-left: 16px;
 	display: flex;
 	flex-direction: column;
-	gap: var(--tl-space-2);
+	gap: var(--space-2);
 }
 
 .tlui-dialog__footer {
 	position: relative;
 	min-height: 12px;
-	z-index: var(--tl-layer-header-footer);
+	z-index: var(--layer-header-footer);
 }
 
 .tlui-dialog__footer__actions {
@@ -3383,15 +3284,15 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-edit-link-dialog {
 	display: flex;
 	flex-direction: column;
-	gap: var(--tl-space-4);
-	color: var(--tl-color-text);
+	gap: var(--space-4);
+	color: var(--color-text);
 }
 
 .tlui-edit-link-dialog__input {
-	background-color: var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
 	flex-grow: 2;
-	border-radius: var(--tl-radius-2);
-	padding: 0px var(--tl-space-4);
+	border-radius: var(--radius-2);
+	padding: 0px var(--space-4);
 }
 
 /* Embed Dialog */
@@ -3399,15 +3300,15 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-embed__spacer {
 	flex-grow: 2;
 	min-height: 0px;
-	margin-left: calc(-1 * var(--tl-space-4));
-	margin-top: calc(-1 * var(--tl-space-4));
+	margin-left: calc(-1 * var(--space-4));
+	margin-top: calc(-1 * var(--space-4));
 	pointer-events: none;
 }
 
 .tlui-embed-dialog__list {
 	display: flex;
 	flex-direction: column;
-	padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
+	padding: 0px var(--space-3) var(--space-4) var(--space-3);
 }
 
 .tlui-embed-dialog__item__image {
@@ -3419,49 +3320,49 @@ it from receiving any pointer events or affecting the cursor. */
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center center;
-	background-color: var(--tl-color-selected-contrast);
-	border-radius: var(--tl-radius-1);
+	background-color: var(--color-selected-contrast);
+	border-radius: var(--radius-1);
 }
 
 .tlui-embed-dialog__enter {
 	display: flex;
 	flex-direction: column;
-	gap: var(--tl-space-4);
-	color: var(--tl-color-text-1);
+	gap: var(--space-4);
+	color: var(--color-text-1);
 }
 
 .tlui-embed-dialog__input {
-	background-color: var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
 	flex-grow: 2;
-	border-radius: var(--tl-radius-2);
-	padding: 0px var(--tl-space-4);
+	border-radius: var(--radius-2);
+	padding: 0px var(--space-4);
 }
 
 .tlui-embed-dialog__warning {
-	color: var(--tl-color-danger);
+	color: var(--color-danger);
 	text-shadow: none;
 }
 
 .tlui-embed-dialog__instruction__link {
 	display: flex;
-	gap: var(--tl-space-1);
-	margin-top: var(--tl-space-4);
+	gap: var(--space-1);
+	margin-top: var(--space-4);
 }
 
 .tlui-embed-dialog__enter a {
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 }
 
 /* --------------- Keyboard shortcuts --------------- */
 
 .tlui-shortcuts-dialog__header {
-	border-bottom: 1px solid var(--tl-color-divider);
+	border-bottom: 1px solid var(--color-divider);
 }
 
 .tlui-shortcuts-dialog__body {
 	position: relative;
 	columns: 3;
-	column-gap: var(--tl-space-9);
+	column-gap: var(--space-9);
 	pointer-events: all;
 	touch-action: auto;
 
@@ -3479,14 +3380,14 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-shortcuts-dialog__group {
 	break-inside: avoid-column;
-	padding-bottom: var(--tl-space-6);
+	padding-bottom: var(--space-6);
 }
 
 .tlui-shortcuts-dialog__group__title {
 	font-size: inherit;
 	font-weight: inherit;
 	margin: 0px;
-	color: var(--tl-color-text-3);
+	color: var(--color-text-3);
 	height: 32px;
 	display: flex;
 	align-items: center;
@@ -3495,12 +3396,12 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-shortcuts-dialog__group__content {
 	display: flex;
 	flex-direction: column;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 }
 
 .tlui-shortcuts-dialog__key-pair {
 	display: flex;
-	gap: var(--tl-space-4);
+	gap: var(--space-4);
 	align-items: center;
 	justify-content: space-between;
 	height: 32px;
@@ -3527,12 +3428,12 @@ it from receiving any pointer events or affecting the cursor. */
 	height: 24px;
 	background: linear-gradient(
 		to bottom,
-		var(--tl-color-panel-transparent) 0%,
-		var(--tl-color-panel) 90%,
-		var(--tl-color-panel) 100%
+		var(--color-panel-transparent) 0%,
+		var(--color-panel) 90%,
+		var(--color-panel) 100%
 	);
-	border-bottom-left-radius: var(--tl-radius-3);
-	border-bottom-right-radius: var(--tl-radius-3);
+	border-bottom-left-radius: var(--radius-3);
+	border-bottom-right-radius: var(--radius-3);
 	pointer-events: none;
 }
 
@@ -3547,10 +3448,10 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-help-menu {
 	pointer-events: all;
 	position: absolute;
-	bottom: var(--tl-space-2);
-	right: var(--tl-space-2);
-	z-index: var(--tl-layer-panels);
-	border: 2px solid var(--tl-color-background);
+	bottom: var(--space-2);
+	right: var(--space-2);
+	z-index: var(--layer-panels);
+	border: 2px solid var(--color-background);
 	border-radius: 100%;
 }
 
@@ -3561,7 +3462,7 @@ it from receiving any pointer events or affecting the cursor. */
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
-	z-index: var(--tl-layer-panels);
+	z-index: var(--layer-panels);
 	align-items: center;
 	padding-top: 2px;
 	padding-right: 4px;
@@ -3577,7 +3478,7 @@ it from receiving any pointer events or affecting the cursor. */
 	border: none;
 	cursor: pointer;
 	pointer-events: all;
-	border-radius: var(--tl-radius-1);
+	border-radius: var(--radius-1);
 	padding-right: 1px;
 	height: 100%;
 }
@@ -3590,8 +3491,8 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-people-menu__avatar {
 	height: 24px;
 	width: 24px;
-	border: 2px solid var(--tl-color-background);
-	background-color: var(--tl-color-low);
+	border: 2px solid var(--color-background);
+	background-color: var(--color-low);
 	border-radius: 100%;
 	display: flex;
 	align-items: center;
@@ -3600,7 +3501,7 @@ it from receiving any pointer events or affecting the cursor. */
 	font-size: 10px;
 	font-weight: bold;
 	text-align: center;
-	color: var(--tl-color-selected-contrast);
+	color: var(--color-selected-contrast);
 	z-index: 2;
 }
 
@@ -3614,7 +3515,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 @media (hover: hover) {
 	.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
-		border-color: var(--tl-color-low);
+		border-color: var(--color-low);
 	}
 }
 
@@ -3622,12 +3523,12 @@ it from receiving any pointer events or affecting the cursor. */
 	min-width: 0px;
 	font-size: 11px;
 	font-weight: 600;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	font-family: inherit;
 	padding: 0px 4px;
 }
 .tlui-people-menu__more::after {
-	border-radius: var(--tl-radius-2);
+	border-radius: var(--radius-2);
 	inset: 0px;
 }
 
@@ -3656,7 +3557,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-people-menu__section:not(:last-child) {
-	border-bottom: 1px solid var(--tl-color-divider);
+	border-bottom: 1px solid var(--color-divider);
 }
 
 .tlui-people-menu__user {
@@ -3675,7 +3576,7 @@ it from receiving any pointer events or affecting the cursor. */
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: 12px;
-	color: var(--tl-color-text-1);
+	color: var(--color-text-1);
 	max-width: 100%;
 	flex-grow: 1;
 	flex-shrink: 100;
@@ -3687,7 +3588,7 @@ it from receiving any pointer events or affecting the cursor. */
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: 12px;
-	color: var(--tl-color-text-3);
+	color: var(--color-text-3);
 	flex-grow: 100;
 	flex-shrink: 0;
 	margin-left: 4px;
@@ -3778,7 +3679,7 @@ it from receiving any pointer events or affecting the cursor. */
 	inset: 0px;
 	border-width: 2px;
 	border-style: solid;
-	z-index: var(--tl-layer-following-indicator);
+	z-index: var(--layer-following-indicator);
 	pointer-events: none;
 }
 
@@ -3797,7 +3698,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-contextual-toolbar [data-isactive='true']::after {
-	background-color: var(--tl-color-muted-2);
+	background-color: var(--color-muted-2);
 	opacity: 1;
 }
 
@@ -3813,7 +3714,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-contextual-toolbar[data-visible='true'] {
 	opacity: 1;
-	z-index: var(--tl-layer-menus);
+	z-index: var(--layer-menus);
 }
 
 .tlui-contextual-toolbar[data-interactive='true'],
@@ -3861,7 +3762,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes tlui-fade-out {
+@keyframes hide {
 	0% {
 		opacity: 1;
 	}
@@ -3870,21 +3771,21 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@keyframes tlui-slide-in {
+@keyframes slide-in {
 	from {
-		transform: translateX(calc(100% + var(--tl-space-3)));
+		transform: translateX(calc(100% + var(--space-3)));
 	}
 	to {
 		transform: translateX(0px);
 	}
 }
 
-@keyframes tlui-slide-out {
+@keyframes swipe-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}
 	to {
-		transform: translateX(calc(100% + var(--tl-space-3)));
+		transform: translateX(calc(100% + var(--space-3)));
 	}
 }