followups to z-index and PR template (#4054)

some followups to https://github.com/tldraw/tldraw/pull/4020 and
https://github.com/tldraw/tldraw/pull/4038/files

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

.github/pull_request_template.md

@@ -18,4 +18,4 @@ Describe what your pull request does. If you can, add GIFs or images showing the
 
 ### Release notes
 
-- Fixed a bug with...
+- Fixed a bug with…

apps/dotcom/styles/z-board.css

@@ -225,10 +225,6 @@
 	align-items: center;
 }
 
-.tlui-people-menu__user__color-picker {
-	z-index: 200;
-}
-
 .tlui-people-menu__user__color {
 	flex-shrink: 0;
 }

apps/huppy/src/flows/enforcePrLabels.tsx

@@ -56,7 +56,7 @@ export const enforcePrLabels: Flow = {
 			return fail('Please add a label to the PR.')
 		}
 
-		if (pull.body?.includes('Add a brief release note for your PR here.')) {
+		if (pull.body?.includes('Fixed a bug with…')) {
 			return fail('Add a release note to the PR body.')
 		}
 

packages/editor/editor.css

@@ -23,33 +23,39 @@
 	--radius-4: 11px;
 
 	/* Canvas z-index */
-	--layer-cvs-hidden: -999999;
-	--layer-cvs-background: 100;
-	--layer-cvs-grid: 150;
-	--layer-cvs-shapes: 300;
-	--layer-cvs-overlays: 400;
-	--layer-cvs-blocker: 10000;
+	--layer-canvas-hidden: -999999;
+	--layer-canvas-background: 100;
+	--layer-canvas-grid: 150;
+	--layer-canvas-shapes: 300;
+	--layer-canvas-overlays: 500;
+	--layer-canvas-blocker: 10000;
 
 	/* Canvas overlays z-index */
-	--layer-ols-collaborator-scribble: 10;
-	--layer-ols-collaborator-brush: 20;
-	--layer-ols-collaborator-shape-indicator: 30;
-	--layer-ols-user-scribble: 40;
-	--layer-ols-user-brush: 50;
-	--layer-ols-user-indicator-selected: 60;
-	--layer-ols-user-indicator-hovered: 70;
-	--layer-ols-user-handles: 80;
-	--layer-ols-user-snapline: 90;
-	--layer-ols-selection-fg: 100;
-	--layer-ols-user-indicator-hint: 110;
-	--layer-ols-collaborator-cursor-hint: 120;
-	--layer-ols-collaborator-cursor: 130;
+	--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-indicator-selected: 60;
+	--layer-overlays-user-indicator-hovered: 70;
+	--layer-overlays-user-handles: 80;
+	--layer-overlays-user-snapline: 90;
+	--layer-overlays-selection-fg: 100;
+	--layer-overlays-user-indicator-hint: 110;
+	--layer-overlays-collaborator-cursor-hint: 120;
+	--layer-overlays-collaborator-cursor: 130;
 
 	/* Text editor z-index */
 	--layer-text-container: 1;
 	--layer-text-content: 3;
 	--layer-text-editor: 4;
 
+	/* Error fallback z-index */
+	--layer-error-overlay: 1;
+	--layer-error-canvas: 2;
+	--layer-error-canvas-after: 3;
+	--layer-error-content: 4;
+
 	/* Misc */
 	--tl-zoom: 1;
 
@@ -261,7 +267,7 @@ input,
 
 .tl-shapes {
 	position: relative;
-	z-index: var(--layer-cvs-shapes);
+	z-index: var(--layer-canvas-shapes);
 }
 
 .tl-overlays {
@@ -272,7 +278,7 @@ input,
 	width: 100%;
 	contain: strict;
 	pointer-events: none;
-	z-index: var(--layer-cvs-overlays);
+	z-index: var(--layer-canvas-overlays);
 }
 
 .tl-overlays__item {
@@ -296,7 +302,7 @@ input,
 /* ------------------- Background ------------------- */
 
 .tl-background__wrapper {
-	z-index: var(--layer-cvs-background);
+	z-index: var(--layer-canvas-background);
 	position: absolute;
 	inset: 0px;
 	height: 100%;
@@ -318,7 +324,7 @@ input,
 	height: 100%;
 	touch-action: none;
 	pointer-events: none;
-	z-index: var(--layer-cvs-grid);
+	z-index: var(--layer-canvas-grid);
 	contain: strict;
 }
 
@@ -399,58 +405,58 @@ input,
 
 /* back of the stack, behind user's stuff */
 .tl-collaborator__scribble {
-	z-index: var(--layer-ols-collaborator-scribble);
+	z-index: var(--layer-overlays-collaborator-scribble);
 }
 
 .tl-collaborator__brush {
-	z-index: var(--layer-ols-collaborator-brush);
+	z-index: var(--layer-overlays-collaborator-brush);
 }
 
 .tl-collaborator__shape-indicator {
-	z-index: var(--layer-ols-collaborator-shape-indicator);
+	z-index: var(--layer-overlays-collaborator-shape-indicator);
 }
 
 .tl-user-scribble {
-	z-index: var(--layer-ols-user-scribble);
+	z-index: var(--layer-overlays-user-scribble);
 }
 
 .tl-user-brush {
-	z-index: var(--layer-ols-user-brush);
+	z-index: var(--layer-overlays-user-brush);
 }
 
 .tl-user-indicator__selected {
-	z-index: var(--layer-ols-user-indicator-selected);
+	z-index: var(--layer-overlays-user-indicator-selected);
 }
 
 .tl-user-indicator__hovered {
-	z-index: var(--layer-ols-user-indicator-hovered);
+	z-index: var(--layer-overlays-user-indicator-hovered);
 }
 
 .tl-user-handles {
-	z-index: var(--layer-ols-user-handles);
+	z-index: var(--layer-overlays-user-handles);
 }
 
 .tl-user-snapline {
-	z-index: var(--layer-ols-user-snapline);
+	z-index: var(--layer-overlays-user-snapline);
 }
 
 .tl-selection__fg {
 	pointer-events: none;
-	z-index: var(--layer-ols-selection-fg);
+	z-index: var(--layer-overlays-selection-fg);
 }
 
 .tl-user-indicator__hint {
-	z-index: var(--layer-ols-user-indicator-hint);
+	z-index: var(--layer-overlays-user-indicator-hint);
 	stroke-width: calc(2.5px * var(--tl-scale));
 }
 
 /* behind collaborator cursor */
 .tl-collaborator__cursor-hint {
-	z-index: var(--layer-ols-collaborator-cursor-hint);
+	z-index: var(--layer-overlays-collaborator-cursor-hint);
 }
 
 .tl-collaborator__cursor {
-	z-index: var(--layer-ols-collaborator-cursor);
+	z-index: var(--layer-overlays-collaborator-cursor);
 }
 
 .tl-cursor {
@@ -803,7 +809,7 @@ input,
 
 .tl-text-measure {
 	position: absolute;
-	z-index: var(--layer-cvs-hidden);
+	z-index: var(--layer-canvas-hidden);
 	top: 0px;
 	left: 0px;
 	opacity: 0;
@@ -1387,7 +1393,6 @@ input,
 	background-color: var(--color-background);
 	color: var(--color-text-1);
 	position: absolute;
-	z-index: 600;
 }
 
 .tl-error-boundary__overlay {
@@ -1395,7 +1400,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 1;
+	z-index: var(--layer-error-overlay);
 	background-color: var(--color-overlay);
 }
 
@@ -1411,7 +1416,7 @@ input,
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 2;
+	z-index: var(--layer-error-canvas);
 }
 
 /* some browsers seem to have some weird interactions between stacking contexts
@@ -1424,7 +1429,7 @@ it from receiving any pointer events or affecting the cursor. */
 	inset: 0px;
 	height: 100%;
 	width: 100%;
-	z-index: 3;
+	z-index: var(--layer-error-canvas-after);
 	pointer-events: all;
 }
 
@@ -1443,7 +1448,7 @@ it from receiving any pointer events or affecting the cursor. */
 	display: flex;
 	flex-direction: column;
 	overflow: auto;
-	z-index: 4;
+	z-index: var(--layer-error-content);
 	gap: 12px;
 }
 
@@ -1552,7 +1557,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tl-hit-test-blocker {
 	position: absolute;
-	z-index: var(--layer-cvs-blocker);
+	z-index: var(--layer-canvas-blocker);
 	inset: 0px;
 	width: 100%;
 	height: 100%;

packages/tldraw/src/lib/ui.css

@@ -5,7 +5,7 @@
 	--layer-focused-input: 10;
 	--layer-panels: 300;
 	--layer-menus: 400;
-	--layer-cvs-overlays: 500;
+	--layer-canvas-overlays: 500;
 	--layer-toasts: 650;
 	--layer-cursor: 700;
 	--layer-header-footer: 999;
@@ -746,7 +746,7 @@
 	left: 0px;
 	width: 100%;
 	height: 100%;
-	z-index: var(--layer-cvs-overlays);
+	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
 	animation: fadeIn 0.12s ease-out;