chore: cleanup z-indices so that they're all clearly listed (#3855)

minor thing that was bugging me. we had a bunch of z-index vars that
were "unregistered". this brings them back into a consistent place so we
can see from a bird's eye view easily the stacking order of everything.

also, a drive-by fix to not duplicate `--tl-text-outline` inside of
`DefaultCanvas`

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [x] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

packages/editor/editor.css

@@ -22,13 +22,31 @@
 	--radius-3: 9px;
 	--radius-4: 11px;
 	/* Z Index */
+	--layer-hidden: -999999;
+	--layer-behind: -1;
+	--layer-culled-shape: 0;
+	--layer-text-label: 10;
+	--layer-collaborator-scribble: 10;
+	--layer-collaborator-brush: 20;
+	--layer-collaborator-shape-indicator: 30;
+	--layer-user-scribble: 40;
+	--layer-user-brush: 50;
+	--layer-user-indicator-selected: 60;
+	--layer-user-indicator-hovered: 70;
+	--layer-user-handles: 80;
+	--layer-user-snapline: 90;
 	--layer-background: 100;
+	--layer-user-indicator-hint: 110;
+	--layer-collaborator-cursor-hint: 120;
+	--layer-collaborator-cursor: 130;
 	--layer-grid: 150;
 	--layer-culled-shapes: 175;
 	--layer-canvas: 200;
 	--layer-shapes: 300;
 	--layer-overlays: 400;
-	--layer-in-front: 500;
+	--layer-in-front-overlay: 500;
+	--layer-in-front: 600;
+	--layer-bookmark-link: 999;
 	--layer-following-indicator: 1000;
 	--layer-blocker: 10000;
 
@@ -93,9 +111,11 @@
 	/* fext outline */
 	--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
 	--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
-	--tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),
+	--tl-text-outline-reference: 0 var(--b) 0 var(--color-background),
-		var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),
+		0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background),
-		var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 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;
 	inset: 0px;
@@ -294,7 +314,7 @@ input,
 }
 
 .tl-front {
-	z-index: 600;
+	z-index: var(--layer-in-front);
 	position: absolute;
 	inset: 0px;
 	height: 100%;
@@ -386,7 +406,7 @@ input,
 	transform-origin: top left;
 	contain: size layout;
 	background-color: var(--color-culled);
-	z-index: 0;
+	z-index: var(--layer-culled-shape);
 }
 
 /* ---------------- Shape Containers ---------------- */
@@ -420,58 +440,58 @@ input,
 
 /* back of the stack, behind user's stuff */
 .tl-collaborator__scribble {
-	z-index: 10;
+	z-index: var(--layer-collaborator-scribble);
 }
 
 .tl-collaborator__brush {
-	z-index: 20;
+	z-index: var(--layer-collaborator-brush);
 }
 
 .tl-collaborator__shape-indicator {
-	z-index: 30;
+	z-index: var(--layer-collaborator-shape-indicator);
 }
 
 .tl-user-scribble {
-	z-index: 40;
+	z-index: var(--layer-user-scribble);
 }
 
 .tl-user-brush {
-	z-index: 50;
+	z-index: var(--layer-user-brush);
 }
 
 .tl-user-indicator__selected {
-	z-index: 60;
+	z-index: var(--layer-user-indicator-selected);
 }
 
 .tl-user-indicator__hovered {
-	z-index: 70;
+	z-index: var(--layer-user-indicator-hovered);
 }
 
 .tl-user-handles {
-	z-index: 80;
+	z-index: var(--layer-user-handles);
 }
 
 .tl-user-snapline {
-	z-index: 90;
+	z-index: var(--layer-user-snapline);
 }
 
 .tl-selection__fg {
 	pointer-events: none;
-	z-index: 100;
+	z-index: var(--layer-background);
 }
 
 .tl-user-indicator__hint {
-	z-index: 110;
+	z-index: var(--layer-user-indicator-hint);
 	stroke-width: calc(2.5px * var(--tl-scale));
 }
 
 /* behind collaborator cursor */
 .tl-collaborator__cursor-hint {
-	z-index: 120;
+	z-index: var(--layer-collaborator-cursor-hint);
 }
 
 .tl-collaborator__cursor {
-	z-index: 130;
+	z-index: var(--layer-collaborator-cursor);
 }
 
 .tl-cursor {
@@ -824,7 +844,7 @@ input,
 
 .tl-text-measure {
 	position: absolute;
-	z-index: -999999;
+	z-index: var(--layer-hidden);
 	top: 0px;
 	left: 0px;
 	opacity: 0;
@@ -984,7 +1004,7 @@ input,
 .tl-bookmark__link {
 	font-size: 14px;
 	pointer-events: all;
-	z-index: 999;
+	z-index: var(--layer-bookmark-link);
 	overflow: hidden;
 	display: block;
 	color: var(--color-text);
@@ -1007,7 +1027,7 @@ input,
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: 200;
+	z-index: var(--layer-canvas);
 	font-size: 12px;
 	font-weight: 400;
 	color: var(--color-text-1);
@@ -1020,7 +1040,7 @@ input,
 
 .tl-hyperlink-button::after {
 	content: '';
-	z-index: -1;
+	z-index: var(--layer-behind);
 	position: absolute;
 	right: 6px;
 	bottom: 6px;
@@ -1060,7 +1080,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 10;
+	z-index: var(--layer-text-label);
 }
 
 .tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {
@@ -1370,7 +1390,7 @@ input,
 	background-color: var(--color-background);
 	color: var(--color-text-1);
 	position: absolute;
-	z-index: 600;
+	z-index: var(--layer-in-front);
 }
 
 .tl-error-boundary__overlay {
@@ -1378,7 +1398,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 500;
+	z-index: var(--layer-in-front-overlay);
 	background-color: var(--color-overlay);
 }
 
@@ -1394,7 +1414,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: -1;
+	z-index: var(--layer-behind);
 }
 /* some browsers seem to have some weird interactions between stacking contexts
 and pointer-events. this ::after pseudo element covers the canvas and prevents
@@ -1406,7 +1426,7 @@ it from receiving any pointer events or affecting the cursor. */
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 600;
+	z-index: var(--layer-in-front);
 	pointer-events: all;
 }
 
@@ -1425,7 +1445,7 @@ it from receiving any pointer events or affecting the cursor. */
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
-	z-index: 600;
+	z-index: var(--layer-in-front);
 	gap: 12px;
 }
 

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -69,11 +69,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				const lodDisableTextOutline = z < editor.options.textShadowLod
 				container.style.setProperty(
 					'--tl-text-outline',
-					lodDisableTextOutline
+					lodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`
-						? 'none'
-						: `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)`
 				)
 				rMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline
 			}

packages/tldraw/src/lib/ui.css

@@ -1,11 +1,15 @@
 /* @tldraw/ui */
 
 .tl-container {
+	--layer-behind: -1;
+	--layer-above: 1;
+	--layer-focused-input: 10;
 	--layer-panels: 300;
 	--layer-menus: 400;
 	--layer-overlays: 500;
 	--layer-toasts: 650;
 	--layer-cursor: 700;
+	--layer-header-footer: 999;
 }
 
 /* -------------------------------------------------- */
@@ -48,7 +52,7 @@
 
 .tlui-button > * {
 	position: relative;
-	z-index: 1;
+	z-index: var(--layer-above);
 }
 
 .tlui-button__label {
@@ -688,7 +692,7 @@
 	background: none;
 	margin: 0px;
 	position: relative;
-	z-index: 1;
+	z-index: var(--layer-above);
 	height: 40px;
 	max-height: 40px;
 	display: flex;
@@ -771,7 +775,7 @@
 	display: flex;
 	align-items: center;
 	flex: 0;
-	z-index: 999;
+	z-index: var(--layer-header-footer);
 	padding-left: var(--space-4);
 	color: var(--color-text);
 	height: 44px;
@@ -801,7 +805,7 @@
 
 .tlui-dialog__footer {
 	position: relative;
-	z-index: 999;
+	z-index: var(--layer-header-footer);
 }
 
 .tlui-dialog__footer__actions {
@@ -843,7 +847,7 @@
 /* Row of controls + lock button */
 .tlui-toolbar__extras {
 	position: relative;
-	z-index: 1;
+	z-index: var(--layer-above);
 	width: 100%;
 	pointer-events: none;
 	top: 6px;
@@ -858,7 +862,7 @@
 	display: flex;
 	position: relative;
 	flex-direction: row;
-	z-index: 1;
+	z-index: var(--layer-above);
 	background-color: var(--color-low);
 	border-top-left-radius: var(--radius-4);
 	border-top-right-radius: var(--radius-4);
@@ -1154,7 +1158,7 @@
 	content: '';
 	display: block;
 	position: absolute;
-	z-index: -1;
+	z-index: var(--layer-behind);
 	inset: -2px -2px 0px 0px;
 	border-radius: 0;
 	border-top: 2px solid var(--color-background);
@@ -1329,7 +1333,7 @@
 	flex-direction: row;
 	align-items: center;
 	overflow: hidden;
-	z-index: 1;
+	z-index: var(--layer-above);
 }
 
 .tlui-page_menu__item__sortable__title {
@@ -1341,7 +1345,7 @@
 }
 
 .tlui-page_menu__item__sortable:focus-within {
-	z-index: 10;
+	z-index: var(--layer-focused-input);
 }
 
 .tlui-page_menu__item__sortable__handle {