diff --git a/apps/web/src/navigation-dialog.tsx b/apps/web/src/navigation-dialog.tsx index f9072b0a..b3efe94c 100644 --- a/apps/web/src/navigation-dialog.tsx +++ b/apps/web/src/navigation-dialog.tsx @@ -41,6 +41,7 @@ export function NavigationDialog( diff --git a/apps/web/src/navigation-shell.tsx b/apps/web/src/navigation-shell.tsx index 510a47ee..abc7a31a 100644 --- a/apps/web/src/navigation-shell.tsx +++ b/apps/web/src/navigation-shell.tsx @@ -223,6 +223,7 @@ function NavigationDrawer( diff --git a/apps/web/src/project-sidebar.tsx b/apps/web/src/project-sidebar.tsx index 9fb88e58..fea2641f 100644 --- a/apps/web/src/project-sidebar.tsx +++ b/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( diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css index 0a450838..3c4ec5ae 100644 --- a/apps/web/src/theme.css +++ b/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; } } diff --git a/packages/editor/src/comment-layer.tsx b/packages/editor/src/comment-layer.tsx index e66cbf0a..de6df83d 100644 --- a/packages/editor/src/comment-layer.tsx +++ b/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 => { diff --git a/packages/editor/src/table/action-toolbar.tsx b/packages/editor/src/table/action-toolbar.tsx index 0536a723..96774c58 100644 --- a/packages/editor/src/table/action-toolbar.tsx +++ b/packages/editor/src/table/action-toolbar.tsx @@ -151,6 +151,7 @@ export function TableActionToolbar( show("add")} type="button" > @@ -159,6 +160,7 @@ export function TableActionToolbar( show("remove")} type="button" > @@ -167,6 +169,7 @@ export function TableActionToolbar( show("move")} type="button" > @@ -175,6 +178,7 @@ export function TableActionToolbar( act(() => $setAlign(table.key, column, nextAlign(align)))} type="button" > @@ -186,6 +190,7 @@ export function TableActionToolbar( act(() => @@ -197,6 +202,7 @@ export function TableActionToolbar( act(() => $addRow(table.key, row + 1))} type="button" @@ -205,6 +211,7 @@ export function TableActionToolbar( act(() => $addColumn(table.key, column))} type="button" @@ -213,6 +220,7 @@ export function TableActionToolbar( act(() => $addColumn(table.key, column + 1))} type="button" @@ -226,6 +234,7 @@ export function TableActionToolbar( act(() => @@ -237,6 +246,7 @@ export function TableActionToolbar( act(() => $removeColumn(table.key, column))} type="button" @@ -250,6 +260,7 @@ export function TableActionToolbar( act(() => @@ -261,6 +272,7 @@ export function TableActionToolbar( act(() => $moveRow(table.key, row, row + 1))} type="button" @@ -269,6 +281,7 @@ export function TableActionToolbar( act(() => $moveColumn(table.key, column, column - 1))} type="button" @@ -277,6 +290,7 @@ export function TableActionToolbar( act(() => $moveColumn(table.key, column, column + 1))} type="button" diff --git a/packages/editor/src/table/rails.tsx b/packages/editor/src/table/rails.tsx index 27b8f7c4..0afc1f9e 100644 --- a/packages/editor/src/table/rails.tsx +++ b/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`} diff --git a/packages/editor/src/toolbar/bubble.tsx b/packages/editor/src/toolbar/bubble.tsx index 8e90500f..e31a07b8 100644 --- a/packages/editor/src/toolbar/bubble.tsx +++ b/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" > {item.glyph} @@ -346,6 +347,7 @@ export function SelectionBubble( title={`${describe(block).label} — change block type`} onClick={() => setChoosing(true)} className={`${CELL} ${CELL_OFF}`} + data-press="small" > {describe(block).glyph} @@ -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" > {mark.glyph} @@ -379,6 +382,7 @@ export function SelectionBubble( editor.dispatchCommand(TOGGLE_LINK_COMMAND, url); }} className={`${CELL} ${CELL_OFF}`} + data-press="small" > @@ -403,6 +407,7 @@ export function SelectionBubble( setPosition(undefined); }} className={`${CELL} ${CELL_OFF}`} + data-press="small" > diff --git a/scripts/design-contract/exceptions/dynamic-editor.json b/scripts/design-contract/exceptions/dynamic-editor.json index 2b00de71..590c9497 100644 --- a/scripts/design-contract/exceptions/dynamic-editor.json +++ b/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", diff --git a/scripts/design-contract/exceptions/dynamic-web.json b/scripts/design-contract/exceptions/dynamic-web.json index b6eada2c..f5bbd318 100644 --- a/scripts/design-contract/exceptions/dynamic-web.json +++ b/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",