@shipfox/client-integrations 14.0.0 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "14.0.0",
+  "version": "16.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,20 +27,20 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "12.0.0",
-    "@shipfox/api-integration-gitea-dto": "12.0.0",
-    "@shipfox/api-integration-github-dto": "12.0.0",
-    "@shipfox/api-integration-jira-dto": "12.0.0",
-    "@shipfox/api-integration-linear-dto": "12.0.0",
-    "@shipfox/api-integration-slack-dto": "12.0.0",
-    "@shipfox/api-integration-sentry-dto": "12.0.0",
-    "@shipfox/api-integration-webhook-dto": "12.0.0",
+    "@shipfox/api-integration-core-dto": "12.2.0",
+    "@shipfox/api-integration-gitea-dto": "12.2.0",
+    "@shipfox/api-integration-github-dto": "12.2.0",
+    "@shipfox/api-integration-linear-dto": "12.2.0",
+    "@shipfox/api-integration-jira-dto": "12.2.0",
+    "@shipfox/api-integration-slack-dto": "12.2.0",
+    "@shipfox/api-integration-webhook-dto": "12.2.0",
+    "@shipfox/api-integration-sentry-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "14.0.0",
-    "@shipfox/client-shell": "14.0.0",
-    "@shipfox/client-ui": "14.0.0",
-    "@shipfox/integration-icons": "0.3.0",
-    "@shipfox/react-ui": "0.5.0"
+    "@shipfox/client-auth": "16.0.0",
+    "@shipfox/client-shell": "16.0.0",
+    "@shipfox/client-ui": "16.0.0",
+    "@shipfox/react-ui": "1.1.0",
+    "@shipfox/integration-icons": "0.3.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/callback-status-shell.tsx

@@ -43,15 +43,15 @@ export function CallbackStatusShell({
     : undefined;
 
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>
         <Callout role={status === 'error' ? 'alert' : 'status'} type={status}>
           <Text size="sm">{message}</Text>
         </Callout>
-        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
+        <div className="flex flex-col gap-inline sm:flex-row sm:items-center">
           {switchAccount ? (
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
               <Link

package/src/components/connection-picker.tsx

@@ -19,7 +19,7 @@ export function ConnectionPicker({
   const labelId = useId();
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       <Label id={labelId} className="sr-only">
         Source integration
       </Label>
@@ -27,7 +27,7 @@ export function ConnectionPicker({
         aria-labelledby={labelId}
         value={selectedConnectionId ?? ''}
         onValueChange={onSelect}
-        className="grid grid-cols-2 gap-8 max-[760px]:grid-cols-1"
+        className="grid grid-cols-2 gap-inline max-[760px]:grid-cols-1"
       >
         {connections.map((connection) => (
           <RadioGroupItem key={connection.id} value={connection.id}>
@@ -43,7 +43,7 @@ function ConnectionOption({connection}: {connection: IntegrationConnection}) {
   const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(connection.displayName);
 
   return (
-    <span className="flex min-w-0 items-center gap-10">
+    <span className="flex min-w-0 items-center gap-inline">
       <Tooltip>
         <TooltipTrigger asChild>
           <span className="shrink-0">

package/src/components/installed-integrations-section.tsx

@@ -48,8 +48,8 @@ export function InstalledIntegrationsSection({
   providerDisplayName,
 }: InstalledIntegrationsSectionProps) {
   return (
-    <section className="flex flex-col gap-16" aria-label="Installed integrations">
-      <div className="flex flex-col gap-4">
+    <section className="flex flex-col gap-group" aria-label="Installed integrations">
+      <div className="flex flex-col gap-tight">
         <Header variant="h3">Installed integrations</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           Provider accounts installed in this workspace.
@@ -59,7 +59,7 @@ export function InstalledIntegrationsSection({
       {isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
 
       {error ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
           <QueryLoadError
             query={{isError: true, isFetching, data: undefined, error, refetch: onRetry}}
             subject="integrations"
@@ -68,7 +68,7 @@ export function InstalledIntegrationsSection({
       ) : null}
 
       {!isPending && !error && connections.length === 0 ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
           <EmptyState
             icon="componentLine"
             title="No integrations installed yet"
@@ -120,7 +120,7 @@ function InstalledRow({
   const providerName = providerDisplayName(connection.provider);
 
   return (
-    <li className="flex items-center gap-12 px-16 py-12 transition-colors hover:bg-background-components-hover">
+    <li className="flex items-center gap-cluster px-row py-row transition-colors hover:bg-background-components-hover">
       <IntegrationIcon
         source={connection.provider}
         aria-hidden
@@ -129,8 +129,8 @@ function InstalledRow({
           muted ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-base',
         )}
       />
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <div className="flex min-w-0 items-center gap-8">
+      <div className="flex min-w-0 flex-1 flex-col gap-tight">
+        <div className="flex min-w-0 items-center gap-inline">
           <Text
             size="md"
             bold
@@ -196,9 +196,9 @@ function InstalledSkeleton({label}: {label: string}) {
       className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}
     >
       {[0, 1, 2].map((row) => (
-        <li key={row} className="flex items-center gap-12 px-16 py-12">
+        <li key={row} className="flex items-center gap-cluster px-row py-row">
           <Skeleton className="size-24 shrink-0" />
-          <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <div className="flex min-w-0 flex-1 flex-col gap-tight">
             <Skeleton className="h-16 w-120" />
             <Skeleton className="h-12 w-80" />
           </div>

package/src/components/integration-delete-confirm-modal.tsx

@@ -36,7 +36,7 @@ export function IntegrationDeleteConfirmModal({
       <ModalContent aria-describedby={undefined}>
         <ModalTitle className="sr-only">Delete integration</ModalTitle>
         <ModalHeader title="Delete integration" showClose={!isPending} />
-        <ModalBody className="gap-16">
+        <ModalBody className="gap-group">
           <Text size="sm">
             Are you sure you want to delete <strong className="font-medium">{name}</strong>? Once
             deleted, Shipfox will immediately stop processing events from this integration. This

package/src/components/integration-gallery-for-workspace.tsx

@@ -123,7 +123,7 @@ export function IntegrationGalleryForWorkspace({
   }
 
   return (
-    <div className="flex flex-col gap-24">
+    <div className="flex flex-col gap-section">
       <InstalledIntegrationsSection
         workspaceSlug={workspaceSlug}
         connections={sortedConnections}
@@ -145,8 +145,8 @@ export function IntegrationGalleryForWorkspace({
         providerDisplayName={providerDisplayName}
       />
 
-      <section className="flex flex-col gap-16" aria-label="Available integrations">
-        <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Available integrations">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Available integrations</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Providers available to install in this workspace.

package/src/components/integration-gallery.stories.tsx

@@ -17,6 +17,7 @@ import {
 } from '@tanstack/react-router';
 import {createStore, Provider as JotaiProvider} from 'jotai';
 import {useMemo} from 'react';
+import {expect, screen, userEvent, within} from 'storybook/test';
 import {IntegrationGallery} from './integration-gallery.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
@@ -148,6 +149,25 @@ export const LongNames: Story = {
   args: {scenario: 'long-names'},
 };
 
+export const UsageModalCloseRestoresInteraction: Story = {
+  play: async ({canvasElement}) => {
+    const user = userEvent.setup();
+    const canvas = within(canvasElement);
+    const actionsButton = await canvas.findByRole('button', {
+      name: 'Open acme-corp integration actions',
+    });
+
+    await user.click(actionsButton);
+    await user.click(await screen.findByRole('menuitem', {name: 'Use this integration'}));
+    await screen.findByRole('dialog', {name: 'Use acme-corp'});
+    await user.click(await screen.findByRole('button', {name: 'Done'}));
+    expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();
+    expect(document.body.style.pointerEvents).not.toBe('none');
+    await user.click(actionsButton);
+    await screen.findByRole('menuitem', {name: 'Use this integration'});
+  },
+};
+
 function fetchForScenario(scenario: Scenario): typeof fetch {
   return (input, init) => {
     const url = requestUrl(input);

package/src/components/integration-gallery.test.tsx

@@ -367,6 +367,27 @@ describe('IntegrationGallery — installed section', () => {
     expect(screen.getByText(webhookConnectionDto.inbound_url)).toBeVisible();
   });
 
+  test('restores page interactivity after closing the usage modal', async () => {
+    renderGallery({}, {connections: [webhookConnection]});
+
+    await openActions('Open Stripe production integration actions');
+    expect(document.body.style.pointerEvents).toBe('none');
+    fireEvent.click(screen.getByRole('menuitem', {name: 'Use this integration'}));
+    expect(await screen.findByRole('dialog', {name: 'Use Stripe production'})).toBeVisible();
+    expect(document.body.style.pointerEvents).toBe('none');
+
+    const usageDialog = screen.getByRole('dialog', {name: 'Use Stripe production'});
+    fireEvent.click(within(usageDialog).getByRole('button', {name: 'Done'}));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog', {name: 'Use Stripe production'})).not.toBeInTheDocument();
+      expect(document.body).not.toHaveStyle({pointerEvents: 'none'});
+    });
+
+    await openActions('Open Stripe production integration actions');
+    expect(screen.getByRole('menuitem', {name: 'Use this integration'})).toBeVisible();
+  });
+
   test('opens the usage modal with a GitHub event selector', async () => {
     renderGallery({}, {connections: [githubConnection]});
 

package/src/components/integration-usage-modal.tsx

@@ -71,13 +71,15 @@ export function IntegrationUsageModal({
   );
   const title = connection ? `Use ${connection.displayName}` : 'Use integration';
 
+  if (!open || connection === null) return null;
+
   return (
-    <Modal open={open && connection !== null} onOpenChange={onOpenChange}>
+    <Modal open={open} onOpenChange={onOpenChange}>
       <ModalContent aria-describedby={undefined} className="max-h-[calc(100vh-32px)] max-w-[640px]">
         <ModalTitle className="sr-only">{title}</ModalTitle>
         <ModalHeader>
-          <div className="flex min-w-0 flex-col gap-2">
-            <div className="flex min-w-0 items-center gap-8">
+          <div className="flex min-w-0 flex-col gap-tight">
+            <div className="flex min-w-0 items-center gap-inline">
               <Text size="lg" aria-hidden="true" className="truncate">
                 {title}
               </Text>
@@ -92,13 +94,13 @@ export function IntegrationUsageModal({
         </ModalHeader>
         {connection ? (
           <>
-            <ModalBody className="min-h-0 flex-1 gap-24 overflow-y-auto overflow-x-clip scrollbar">
-              <section className="flex w-full flex-col gap-12">
+            <ModalBody className="min-h-0 flex-1 gap-section overflow-y-auto overflow-x-clip scrollbar">
+              <section className="flex w-full flex-col gap-cluster">
                 <Text size="md" bold>
                   Usage
                 </Text>
                 {events.length > 1 ? (
-                  <div className="flex flex-col gap-6">
+                  <div className="flex flex-col gap-inline">
                     <label
                       htmlFor="integration-usage-event"
                       className="font-display text-sm font-medium text-foreground-neutral-base"
@@ -144,7 +146,7 @@ export function IntegrationUsageModal({
                 </CodeBlock>
               </section>
               {children ? (
-                <section className="flex w-full flex-col gap-12">
+                <section className="flex w-full flex-col gap-cluster">
                   <Text size="md" bold>
                     Details
                   </Text>

package/src/components/provider-grid.tsx

@@ -23,7 +23,7 @@ export interface ProviderGridProps {
   onOpenProvider?: ((provider: string) => void) | undefined;
 }
 
-export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-12 max-[760px]:grid-cols-1';
+export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1';
 
 export const PROVIDER_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
@@ -46,7 +46,7 @@ export function ProviderGrid({
 
   if (error) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-16')}>
+      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
         <QueryLoadError
           query={{
             isError: true,
@@ -63,7 +63,7 @@ export function ProviderGrid({
 
   if (installableProviders.length === 0) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-16')}>
+      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
         <EmptyState
           icon="componentLine"
           title="No integrations available"
@@ -106,7 +106,7 @@ function ProviderCard({
         type="button"
         aria-label={`Add ${provider.displayName}`}
         onClick={() => onOpenProvider?.(provider.provider)}
-        className="group flex h-full w-full min-w-0 items-center justify-between gap-12 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+        className="group flex h-full w-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
       >
         <ProviderCardContent provider={provider} action="Add" />
       </button>
@@ -118,7 +118,7 @@ function ProviderCard({
       to={catalog.setupPath}
       params={{workspaceSlug}}
       aria-label={`Install ${provider.displayName}`}
-      className="group flex h-full min-w-0 items-center justify-between gap-12 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+      className="group flex h-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
     >
       <ProviderCardContent provider={provider} action="Install" />
     </Link>
@@ -134,7 +134,7 @@ function ProviderCardContent({
 }) {
   return (
     <>
-      <span className="flex min-w-0 items-center gap-12">
+      <span className="flex min-w-0 items-center gap-cluster">
         <IntegrationIcon
           source={provider.provider}
           aria-hidden
@@ -144,7 +144,7 @@ function ProviderCardContent({
           {provider.displayName}
         </Text>
       </span>
-      <span className="flex shrink-0 items-center gap-4 text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
+      <span className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
         <Text as="span" size="sm">
           {action}
         </Text>
@@ -159,9 +159,9 @@ function ProviderGridSkeleton({label}: {label: string}) {
     <ul role="status" aria-label={label} className={PROVIDER_GRID_CLASS}>
       {[0, 1, 2, 3].map((tile) => (
         <li key={tile}>
-          <Card className="h-full p-16">
-            <div className="flex items-center justify-between gap-12">
-              <div className="flex min-w-0 items-center gap-12">
+          <Card className="h-full p-panel-compact">
+            <div className="flex items-center justify-between gap-cluster">
+              <div className="flex min-w-0 items-center gap-cluster">
                 <Skeleton className="size-24 shrink-0" />
                 <Skeleton className="h-16 w-100" />
               </div>

package/src/components/redirect-install-page.tsx

@@ -54,7 +54,7 @@ export function RedirectInstallPage({
 
   if (errorMessage) {
     return (
-      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-16">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-group">
         <Callout role="alert" type="error">
           <Text size="sm">{errorMessage}</Text>
         </Callout>

package/src/components/repository-picker.test.tsx

@@ -75,7 +75,7 @@ describe('RepositoryPicker', () => {
     const loadingGrid = container.querySelector('[aria-hidden="true"]');
     if (!loadingGrid) throw new Error('Repository loading grid was not rendered');
 
-    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'gap-8', 'max-[760px]:grid-cols-1');
+    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'gap-inline', 'max-[760px]:grid-cols-1');
     expect(loadingGrid.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(4);
     for (const placeholder of loadingGrid.querySelectorAll(':scope > div')) {
       expect(placeholder).toHaveClass(
@@ -84,7 +84,7 @@ describe('RepositoryPicker', () => {
         'border',
         'border-border-neutral-base',
         'bg-background-neutral-base',
-        'p-14',
+        'p-[14px]',
       );
     }
   });

package/src/components/repository-picker.tsx

@@ -9,7 +9,7 @@ import {Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import type {Repository} from '#core/models.js';
 
-const REPOSITORY_GRID_CLASS_NAME = 'grid grid-cols-2 gap-8 max-[760px]:grid-cols-1';
+const REPOSITORY_GRID_CLASS_NAME = 'grid grid-cols-2 gap-inline max-[760px]:grid-cols-1';
 const REPOSITORY_SKELETON_WIDTHS = ['w-64', 'w-96', 'w-80', 'w-112'] as const;
 
 export function RepositoryPicker({
@@ -41,7 +41,7 @@ export function RepositoryPicker({
   const showSearch = onSearchChange !== undefined;
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       <Label id={labelId} className="sr-only">
         Repository
       </Label>
@@ -60,7 +60,7 @@ export function RepositoryPicker({
       {isLoading ? <RepositoryLoadingState /> : null}
 
       {!isLoading && repositories.length === 0 ? (
-        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-14">
+        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-panel-compact">
           <Text size="sm">{emptyMessage}</Text>
         </div>
       ) : null}
@@ -119,10 +119,12 @@ function RepositoryLoadingState() {
         Loading repositories.
       </div>
       <div aria-hidden="true" className={REPOSITORY_GRID_CLASS_NAME}>
+        {/* The skeleton mirrors RadioGroupItem's own 14px padding contract so the
+            placeholder and the loaded card stay the same height. */}
         {REPOSITORY_SKELETON_WIDTHS.map((width) => (
           <div
             key={width}
-            className="h-50 min-w-0 rounded-8 border border-border-neutral-base bg-background-neutral-base p-14"
+            className="h-50 min-w-0 rounded-8 border border-border-neutral-base bg-background-neutral-base p-[14px]"
           >
             <Skeleton className={`h-20 ${width}`} />
           </div>

package/src/components/webhook/copyable-value.tsx

@@ -40,12 +40,12 @@ export function CopyableValue({label, value, note, className}: CopyableValueProp
   }
 
   return (
-    <div className={cn('flex w-full min-w-0 flex-col gap-8', className)}>
-      <div className="flex min-w-0 items-center gap-8">
+    <div className={cn('flex w-full min-w-0 flex-col gap-inline', className)}>
+      <div className="flex min-w-0 items-center gap-inline">
         <Code
           as="span"
           variant="paragraph"
-          className="min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-8 py-6 text-foreground-neutral-base"
+          className="min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-tight py-[6px] text-foreground-neutral-base"
         >
           {value}
         </Code>

package/src/components/webhook/webhook-create-modal.tsx

@@ -97,7 +97,7 @@ export function WebhookCreateModal({
             void form.handleSubmit();
           }}
         >
-          <ModalBody className="gap-16">
+          <ModalBody className="gap-group">
             <Text size="sm" className="text-foreground-neutral-muted">
               Create a named inbound webhook URL for this workspace.
             </Text>

package/src/components/webhook/webhook-usage-details.tsx

@@ -29,8 +29,8 @@ export function WebhookUsageDetails({workspaceId, connectionId}: WebhookUsageDet
   if (!connection) return null;
 
   return (
-    <div className="flex w-full flex-col gap-16">
-      <div className="flex w-full min-w-0 flex-col gap-8">
+    <div className="flex w-full flex-col gap-group">
+      <div className="flex w-full min-w-0 flex-col gap-inline">
         <Text size="sm" bold>
           Inbound URL
         </Text>

package/src/pages/gitea-install-page.tsx

@@ -40,8 +40,8 @@ export function GiteaInstallPage() {
   });
 
   return (
-    <div className="mx-auto flex w-full max-w-[480px] flex-col gap-20">
-      <header className="flex flex-col gap-8">
+    <div className="mx-auto flex w-full max-w-[480px] flex-col gap-section">
+      <header className="flex flex-col gap-inline">
         <Header variant="h1">Install Gitea</Header>
         <Text size="md" className="text-foreground-neutral-muted">
           Enter the Gitea organization to install in this workspace.
@@ -49,7 +49,7 @@ export function GiteaInstallPage() {
       </header>
 
       <form
-        className="flex flex-col gap-18"
+        className="flex flex-col gap-group"
         noValidate
         onSubmit={(event) => {
           event.preventDefault();
@@ -83,7 +83,7 @@ export function GiteaInstallPage() {
             </FormField>
           )}
         </form.Field>
-        <div className="flex items-center gap-12">
+        <div className="flex items-center gap-cluster">
           <Button type="submit" isLoading={connect.isPending}>
             Install
           </Button>

package/src/pages/jira-callback-page.tsx

@@ -300,9 +300,9 @@ function JiraSiteSelectionPage({
   onSelect: (site: JiraSite) => void;
 }) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
-        <header className="flex flex-col gap-8">
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
+        <header className="flex flex-col gap-inline">
           <Header variant="h2">Choose a Jira site</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Select the Jira site to connect to this Shipfox workspace.
@@ -315,10 +315,10 @@ function JiraSiteSelectionPage({
           </Callout>
         ) : null}
 
-        <section className="flex flex-col gap-8" aria-label="Choose a Jira site">
+        <section className="flex flex-col gap-inline" aria-label="Choose a Jira site">
           {sites.map((site) => (
-            <Card key={site.cloudId} className="p-16">
-              <div className="flex items-center justify-between gap-12">
+            <Card key={site.cloudId} className="p-panel-compact">
+              <div className="flex items-center justify-between gap-cluster">
                 <div className="min-w-0">
                   <Text size="md" bold className="truncate">
                     {site.name}
@@ -340,7 +340,7 @@ function JiraSiteSelectionPage({
           ))}
         </section>
 
-        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
+        <div className="flex flex-col gap-inline sm:flex-row sm:items-center">
           {failure?.startOver && workspaceSlug ? (
             <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
               <Link to="/w/$workspaceSlug/integrations/jira" params={{workspaceSlug}}>

package/src/pages/sentry-callback-page.tsx

@@ -170,7 +170,7 @@ export function SentryCallbackPage() {
 
   return (
     <CallbackColumn>
-      <header className="flex flex-col gap-8">
+      <header className="flex flex-col gap-inline">
         <Header variant="h2">Install Sentry</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           {params.orgSlug
@@ -181,7 +181,7 @@ export function SentryCallbackPage() {
 
       {failure ? (
         <Callout role="alert" type="error">
-          <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-inline">
             <Text size="sm">{failure.failure.message}</Text>
             {failure.failure.kind === 'retryable' ? (
               <Button
@@ -210,10 +210,10 @@ export function SentryCallbackPage() {
         </Callout>
       ) : null}
 
-      <section className="flex flex-col gap-8" aria-label="Choose a workspace">
+      <section className="flex flex-col gap-inline" aria-label="Choose a workspace">
         {orderedWorkspaces.map((workspace) => (
-          <Card key={workspace.id} className="p-16">
-            <div className="flex items-center justify-between gap-12">
+          <Card key={workspace.id} className="p-panel-compact">
+            <div className="flex items-center justify-between gap-cluster">
               <Text size="md" bold className="truncate">
                 {workspace.name}
               </Text>
@@ -246,8 +246,8 @@ export function SentryCallbackPage() {
 
 function CallbackColumn({children}: {children: React.ReactNode}) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
         {children}
       </div>
     </main>

package/src/pages/source-control-onboarding-page.tsx

@@ -8,8 +8,8 @@ export function SourceControlOnboardingPage() {
   const providersQuery = useIntegrationProvidersQuery({capability: 'source_control'});
 
   return (
-    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-20">
-      <header className="flex flex-col gap-8">
+    <div className="mx-auto flex w-full max-w-[640px] flex-col gap-section">
+      <header className="flex flex-col gap-inline">
         <Header variant="h1">Install source control</Header>
         <Text size="md" className="text-foreground-neutral-muted">
           Shipfox needs a source control integration to import your repositories.