Make the button press subtle on large targets

apps/web/src/navigation-dialog.tsx

@@ -41,6 +41,7 @@ export function NavigationDialog(
 			<button
 				aria-label={`Close ${title}`}
 				className="navigation-modal-backdrop"
+				data-press="none"
 				onClick={onDismiss}
 				type="button"
 			/>

apps/web/src/navigation-shell.tsx

@@ -223,6 +223,7 @@ function NavigationDrawer(
 			<button
 				aria-label="Close Projects sidebar"
 				className="navigation-drawer-backdrop"
+				data-press="none"
 				onClick={onDismiss}
 				type="button"
 			/>

apps/web/src/project-sidebar.tsx

@@ -249,6 +249,7 @@ function Project(
 						aria-busy={!!phase}
 						aria-label={`New document in ${label}`}
 						className={`project-sidebar-action ${phase ? "project-sidebar-action-pending" : ""}`}
+						data-press="small"
 						data-tooltip="New Document"
 						disabled={!!phase}
 						onClick={() => onCreateDocument(project)}
@@ -401,6 +402,7 @@ export function ProjectSidebar(
 					<button
 						aria-label="Collapse Projects sidebar"
 						className="project-sidebar-action"
+						data-press="small"
 						data-tooltip="Close Sidebar"
 						onClick={onCollapse}
 						type="button"
@@ -418,6 +420,7 @@ export function ProjectSidebar(
 							<button
 								aria-label="Add Project"
 								className="project-sidebar-action"
+								data-press="small"
 								onClick={onAddProject}
 								type="button"
 							>

apps/web/src/theme.css

@@ -710,17 +710,23 @@ body {
 	transition: scale var(--duration-fast) var(--ease-out);
 }
 
+/*
+ * The scale is a proportion, so the default is subtle: 4% of a full-width row
+ * is several pixels at each edge and reads as jumping, where 4% of a 28px
+ * toolbar cell is the one pixel that is wanted. Small controls opt in to the
+ * stronger press with `.btn-icon`, `.btn-sm`, or `data-press="small"`; a
+ * full-screen backdrop opts out with `data-press="none"`.
+ */
 @media (prefers-reduced-motion: no-preference) {
 	:where(button, [role="button"]):not(:disabled):active {
+		scale: 0.99;
+	}
+
+	:where(button, [role="button"]):where(.btn-icon, .btn-sm, [data-press="small"]):not(:disabled):active {
 		scale: 0.96;
 	}
 
-	/*
-	 * A proportion, so a row needs a smaller one: 4% of a full-width row is
-	 * several pixels at each edge and reads as jumping, where 4% of a 28px
-	 * toolbar cell is the one pixel that is wanted.
-	 */
-	:where(button, [role="button"])[data-press="wide"]:not(:disabled):active {
-		scale: 0.99;
+	:where(button, [role="button"])[data-press="none"]:not(:disabled):active {
+		scale: none;
 	}
 }

packages/editor/src/comment-layer.tsx

@@ -689,6 +689,7 @@ export function CommentLayer({ store }: { store: ThreadStore }) {
 							aria-description={replyState(view)}
 							aria-expanded={shown}
 							className="plan-comment-button"
+							data-press="small"
 							data-plan-comment-button={view.thread.id}
 							onBlur={() => unhover(view.thread.id)}
 							onClick={event => {

packages/editor/src/table/action-toolbar.tsx

@@ -151,6 +151,7 @@ export function TableActionToolbar(
 				<button
 					aria-expanded={group === "add"}
 					className={button}
+					data-press="small"
 					onClick={() => show("add")}
 					type="button"
 				>
@@ -159,6 +160,7 @@ export function TableActionToolbar(
 				<button
 					aria-expanded={group === "remove"}
 					className={button}
+					data-press="small"
 					onClick={() => show("remove")}
 					type="button"
 				>
@@ -167,6 +169,7 @@ export function TableActionToolbar(
 				<button
 					aria-expanded={group === "move"}
 					className={button}
+					data-press="small"
 					onClick={() => show("move")}
 					type="button"
 				>
@@ -175,6 +178,7 @@ export function TableActionToolbar(
 				<button
 					aria-label={`Align column ${column + 1}, currently ${alignmentLabel(align)}`}
 					className={button}
+					data-press="small"
 					onClick={() => act(() => $setAlign(table.key, column, nextAlign(align)))}
 					type="button"
 				>
@@ -186,6 +190,7 @@ export function TableActionToolbar(
 				<div aria-label="Add table actions" className="plan-table-action-panel" role="group">
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.addRowBefore}
 						onClick={() =>
 							act(() =>
@@ -197,6 +202,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.addRowAfter}
 						onClick={() => act(() => $addRow(table.key, row + 1))}
 						type="button"
@@ -205,6 +211,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.addColumn}
 						onClick={() => act(() => $addColumn(table.key, column))}
 						type="button"
@@ -213,6 +220,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.addColumn}
 						onClick={() => act(() => $addColumn(table.key, column + 1))}
 						type="button"
@@ -226,6 +234,7 @@ export function TableActionToolbar(
 				<div aria-label="Remove table actions" className="plan-table-action-panel" role="group">
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.removeRow}
 						onClick={() =>
 							act(() =>
@@ -237,6 +246,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.removeColumn}
 						onClick={() => act(() => $removeColumn(table.key, column))}
 						type="button"
@@ -250,6 +260,7 @@ export function TableActionToolbar(
 				<div aria-label="Move table actions" className="plan-table-action-panel" role="group">
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.moveRowUp}
 						onClick={() =>
 							act(() =>
@@ -261,6 +272,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.moveRowDown}
 						onClick={() => act(() => $moveRow(table.key, row, row + 1))}
 						type="button"
@@ -269,6 +281,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.moveColumnLeft}
 						onClick={() => act(() => $moveColumn(table.key, column, column - 1))}
 						type="button"
@@ -277,6 +290,7 @@ export function TableActionToolbar(
 					</button>
 					<button
 						className={button}
+						data-press="small"
 						disabled={!available.moveColumnRight}
 						onClick={() => act(() => $moveColumn(table.key, column, column + 1))}
 						type="button"

packages/editor/src/table/rails.tsx

@@ -416,6 +416,7 @@ function Rail({ axis, drag, metrics, onAct, onDrag, onHover, table, tracks, tool
 						type="button"
 						aria-label={`Move ${noun} ${index + 1}`}
 						className={`plan-grip ${mine?.from === index ? "is-held" : ""}`}
+						data-press="small"
 						data-tooltip={`Move ${column ? "Column" : "Row"}`}
 						data-plan-held={mine?.from === index || undefined}
 						style={box}
@@ -499,6 +500,7 @@ function Rail({ axis, drag, metrics, onAct, onDrag, onHover, table, tracks, tool
 										alignmentLabel(table.align[index] ?? null)
 									}`}
 									className="plan-align"
+									data-press="small"
 									data-plan-align={table.align[index] ?? "default"}
 									data-tooltip="Align Column"
 									data-plan-shown={shown}
@@ -517,6 +519,7 @@ function Rail({ axis, drag, metrics, onAct, onDrag, onHover, table, tracks, tool
 									type="button"
 									aria-label={`Remove ${noun} ${index + 1}`}
 									className="plan-grip-remove"
+									data-press="small"
 									data-plan-shown={shown}
 									data-tooltip={`Remove ${column ? "Column" : "Row"}`}
 									style={place(PAIR)}
@@ -543,6 +546,7 @@ function Rail({ axis, drag, metrics, onAct, onDrag, onHover, table, tracks, tool
 								? `Insert ${noun} before the first`
 								: `Insert ${noun} after ${noun} ${seam}`}
 							className="plan-insert"
+							data-press="small"
 							data-tooltip={`Insert ${column ? "Column" : "Row"}`}
 							style={seamBox(axis, line, origin, TOOL, SEAM)}
 							title={`Insert a ${noun} here`}

packages/editor/src/toolbar/bubble.tsx

@@ -332,6 +332,7 @@ export function SelectionBubble(
 						title={item.label}
 						onClick={() => convert(item.id)}
 						className={`${CELL} ${item.id === block ? CELL_ON : CELL_OFF}`}
+						data-press="small"
 					>
 						<span aria-hidden="true">{item.glyph}</span>
 					</button>
@@ -346,6 +347,7 @@ export function SelectionBubble(
 							title={`${describe(block).label} — change block type`}
 							onClick={() => setChoosing(true)}
 							className={`${CELL} ${CELL_OFF}`}
+							data-press="small"
 						>
 							<span aria-hidden="true">{describe(block).glyph}</span>
 						</button>
@@ -361,6 +363,7 @@ export function SelectionBubble(
 								title={`${mark.label} (${mark.shortcut})`}
 								onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, mark.format)}
 								className={`${CELL} ${active.has(mark.format) ? CELL_ON : CELL_OFF}`}
+								data-press="small"
 							>
 								<span aria-hidden="true">{mark.glyph}</span>
 							</button>
@@ -379,6 +382,7 @@ export function SelectionBubble(
 								editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
 							}}
 							className={`${CELL} ${CELL_OFF}`}
+							data-press="small"
 						>
 							<LinkPlusIcon aria-hidden="true" />
 						</button>
@@ -403,6 +407,7 @@ export function SelectionBubble(
 										setPosition(undefined);
 									}}
 									className={`${CELL} ${CELL_OFF}`}
+									data-press="small"
 								>
 									<MessagePlusIcon aria-hidden="true" />
 								</button>

scripts/design-contract/exceptions/dynamic-editor.json

@@ -144,7 +144,7 @@
 				3
 			]
 		],
-		"sourceHash": "9e0f068fcf0162f1e6b70c876295c6cf7cd48dd5e9dfe53cfa5b224b34ced5a2"
+		"sourceHash": "b55b20870116c7b2dcd1d7e7f647b5f08431bc6a2a2c5666e7a4bca6a093a229"
 	},
 	{
 		"file": "packages/editor/src/toolbar/research.tsx",
@@ -207,7 +207,7 @@
 				1
 			]
 		],
-		"sourceHash": "736540dffb7041ccc154691b541ad2f1d3bf0d3eaad396b3279e3415ddf33d32"
+		"sourceHash": "c60690040f4b0911e23027b7b975596e0db27e2d4e20c4ec4ce3f1955c5b81e8"
 	},
 	{
 		"file": "packages/editor/src/comment-layer.tsx",
@@ -235,7 +235,7 @@
 				1
 			]
 		],
-		"sourceHash": "736540dffb7041ccc154691b541ad2f1d3bf0d3eaad396b3279e3415ddf33d32"
+		"sourceHash": "c60690040f4b0911e23027b7b975596e0db27e2d4e20c4ec4ce3f1955c5b81e8"
 	},
 	{
 		"file": "packages/editor/src/table/rails.tsx",
@@ -284,7 +284,7 @@
 				1
 			]
 		],
-		"sourceHash": "bd86857696930d6350727ecb37e8baedbd462e0e27fcbe0084decfcafc76e984"
+		"sourceHash": "a44190a1773d99a174d57e966a44d08265639c3e0d6237cd753586c63bbdd2dd"
 	},
 	{
 		"file": "packages/editor/src/disclosure-motion.tsx",

scripts/design-contract/exceptions/dynamic-web.json

@@ -60,7 +60,7 @@
 				1
 			]
 		],
-		"sourceHash": "4be988b75dfd49d70c97cc9ac747bc0f29ccd6cbababc6a22979513843d476ce"
+		"sourceHash": "6a7169d131b0ec3479cf0d9f4edec8ea501d515ce7c2d1752340a5c3e67e2110"
 	},
 	{
 		"file": "apps/web/src/design-audit/icons.tsx",
@@ -186,7 +186,7 @@
 				1
 			]
 		],
-		"sourceHash": "4d9491228ad60ebd10bec71f26a83c7baab62e207e3cedc86770e6eb18b780ac"
+		"sourceHash": "358d930fa0b32ab47a1b255534804e6316298b9e62be9a39f1aac2eea93bbfc9"
 	},
 	{
 		"file": "apps/web/src/viewport.ts",
@@ -263,7 +263,7 @@
 				1
 			]
 		],
-		"sourceHash": "548439acad5973843fc7c4c1502f3646e50cff02cd5517a8caf6afdf6d7e82d6"
+		"sourceHash": "be4b1a50e021d54ae4df59f855a37590de7bfbb96876ab950ca7082764f84906"
 	},
 	{
 		"file": "apps/web/src/repository-picker.tsx",