TkDodo · Oct 15, 2026 · Oct 15, 2026 · Oct 15, 2026 · Oct 15, 2026 · Oct 15, 2026
diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
@@ -167,11 +167,6 @@
       "count": 1
     }
   },
-  "static/app/components/core/useScrollLock.spec.tsx": {
-    "@sentry/require-fake-timer-cleanup": {
-      "count": 1
-    }
-  },
   "static/app/components/customCommitsResolutionModal.tsx": {
     "@sentry/scraps/prefer-primitives": {
       "count": 1

@@ -1654,10 +1654,9 @@ const config = defineConfig({
         'import/no-relative-parent-imports': 'off',
       },
     },
-    // Scraps is its own component library rather than ordinary app code, and a
-    // handful of its internal imports are deliberately parent-relative.
+    // Legacy app core components still use parent-relative imports.
     {
-      files: coreComponentFiles,
+      files: ['static/app/components/core/**/*.{js,mjs,ts,jsx,tsx}'],
       rules: {
         'import/no-relative-parent-imports': 'off',
       },
@@ -1817,7 +1816,6 @@ const config = defineConfig({
         'static/packages/icons/test/**/*.{ts,tsx,mjs}',
       ],
       rules: {
-        'import/no-relative-parent-imports': 'off',
         'import/no-nodejs-modules': 'off',
         'no-restricted-imports': [
           'error',

@@ -71,7 +71,6 @@
     "@types/gtag.js": "^0.0.12",
     "@types/jest": "30.0.0",
     "@types/react": "19.3.0",
-    "@types/react-dom": "19.3.0",
     "@types/trusted-types": "^2.0.7",
     "compression-webpack-plugin": "12.0.0",
     "core-js": "3.45.0",

diff --git a/static/app/actionCreators/modal.tsx b/static/app/actionCreators/modal.tsx
@@ -1,4 +1,5 @@
 import type {ModalTypes} from '@sentry/scraps/modal';
+import type {Theme} from '@sentry/scraps/theme';
 
 import type {
   CommandPaletteState,
@@ -26,7 +27,6 @@ import type {IssueOwnership} from 'sentry/types/group';
 import type {MissingMember, Organization, OrgRole} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
-import type {Theme} from 'sentry/utils/theme';
 import {DisplayType} from 'sentry/views/dashboards/types';
 import type {AttributeBreakdownViewerModalOptions} from 'sentry/views/explore/components/attributeBreakdowns/attributeBreakdownViewerModal';
 

diff --git a/static/app/chartcuterie/config.tsx b/static/app/chartcuterie/config.tsx
@@ -8,7 +8,7 @@
  * into the configuration file loaded by the service.
  */
 
-import {lightTheme} from 'sentry/utils/theme/theme';
+import {lightTheme} from '@sentry/scraps/theme';
 
 import {makeDashboardsWidgetCharts} from './dashboardsWidget';
 import {makeDiscoverCharts} from './discover';

@@ -8,9 +8,9 @@ import {CompactSelect} from '@sentry/scraps/compactSelect';
 import {Flex} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 import {Text} from '@sentry/scraps/text';
+import type {SpaceSize} from '@sentry/scraps/theme';
 
 import {t} from 'sentry/locale';
-import type {SpaceSize} from 'sentry/utils/theme';
 import {useDimensions} from 'sentry/utils/useDimensions';
 
 import {LegendCheckbox} from './components/legendCheckbox';

@@ -29,6 +29,7 @@ import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {InnerWrap} from '@sentry/scraps/menuListItem';
 import type {MenuListItemProps} from '@sentry/scraps/menuListItem';
 import {Text} from '@sentry/scraps/text';
+import type {Theme} from '@sentry/scraps/theme';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import type {CMDKActionData} from 'sentry/components/commandPalette/ui/cmdk';
@@ -48,7 +49,6 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {fzf} from 'sentry/utils/search/fzf';
-import type {Theme} from 'sentry/utils/theme';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useNavigate} from 'sentry/utils/useNavigate';

@@ -12,11 +12,11 @@ import type {DistributedOmit} from 'type-fest';
 import {Button, type ButtonProps} from '@sentry/scraps/button';
 import {Container, Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
+import type {AlertVariant} from '@sentry/scraps/theme';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 
 import {defined} from 'sentry/utils/defined';
 import {PanelProvider} from 'sentry/utils/panelProvider';
-import type {AlertVariant} from 'sentry/utils/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {

@@ -3,12 +3,11 @@ import {IconBroadcast} from '@sentry/icons/broadcast';
 import {IconBug} from '@sentry/icons/bug';
 import {IconLab} from '@sentry/icons/lab';
 
+import type {TagVariant} from '@sentry/scraps/theme';
 import {Tooltip, type TooltipProps} from '@sentry/scraps/tooltip';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 import {useIsInsideInteractiveElement} from '@sentry/scraps/useIsInsideInteractiveElement';
 
-import type {TagVariant} from 'sentry/utils/theme';
-
 import {Tag} from './tag';
 
 function useDefaultTitle(type: FeatureBadgeProps['type']) {

@@ -4,9 +4,9 @@ import {IconClose} from '@sentry/icons/close';
 import {IconDefaultsProvider} from '@sentry/icons/useIconDefaults';
 
 import {Button} from '@sentry/scraps/button';
+import type {TagVariant} from '@sentry/scraps/theme';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 
-import type {TagVariant} from 'sentry/utils/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {

@@ -1,8 +1,7 @@
 import {type SVGIconProps} from '@sentry/icons/svgIcon';
 
 import type {ButtonProps} from '@sentry/scraps/button';
-
-import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
+import type {StrictCSSObject, Theme} from '@sentry/scraps/theme';
 
 import {
   type ButtonVariant,

@@ -4,10 +4,9 @@ import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 
 import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
+import type {FormSize} from '@sentry/scraps/theme';
 import {Tooltip, useDisabledTooltip, type TooltipProps} from '@sentry/scraps/tooltip';
 
-import type {FormSize} from 'sentry/utils/theme';
-
 type CheckboxConfig = {
   borderRadius: string;
   box: string;

@@ -6,10 +6,9 @@ import Prism from 'prismjs';
 
 import {Button} from '@sentry/scraps/button';
 import {Container} from '@sentry/scraps/layout';
+import {darkTheme} from '@sentry/scraps/theme';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 
-import {darkTheme} from 'sentry/utils/theme/theme';
-
 import {getPrismLanguage, loadPrismLanguage} from './prism';
 
 interface CodeBlockProps {

@@ -15,11 +15,11 @@ import {Button} from '@sentry/scraps/button';
 import {InputGroup} from '@sentry/scraps/input';
 import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {OverlayTrigger, type TriggerProps} from '@sentry/scraps/overlayTrigger';
+import type {FormSize} from '@sentry/scraps/theme';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
-import type {FormSize} from 'sentry/utils/theme';
 import type {UseOverlayProps} from 'sentry/utils/useOverlay';
 import {useOverlay} from 'sentry/utils/useOverlay';
 import {usePrevious} from 'sentry/utils/usePrevious';

@@ -1,7 +1,7 @@
 import {createContext} from 'react';
 import type {OverlayTriggerState} from '@react-stately/overlays';
 
-import type {FormSize} from 'sentry/utils/theme';
+import type {FormSize} from '@sentry/scraps/theme';
 
 import type {SearchMatchResult, SelectKey, SelectOptionWithKey} from './types';
 

@@ -18,8 +18,7 @@ import {
   MenuListItem,
   type MenuListItemProps,
 } from '@sentry/scraps/menuListItem';
-
-import type {FormSize} from 'sentry/utils/theme';
+import type {FormSize} from '@sentry/scraps/theme';
 
 export interface GridListOptionProps<
   T extends ListItemBase,

@@ -5,8 +5,9 @@ import type {AriaListBoxOptions} from '@react-aria/listbox';
 import type {ListProps} from '@react-stately/list';
 import {useListState} from '@react-stately/list';
 
+import type {FormSize} from '@sentry/scraps/theme';
+
 import {defined} from 'sentry/utils/defined';
-import type {FormSize} from 'sentry/utils/theme';
 
 import {ControlContext} from './controlContext';
 import {GridList} from './gridList';

@@ -15,10 +15,9 @@ import {
 import type {SelectKey, ListItemBase} from '@sentry/scraps/compactSelect/types';
 import {useVirtualizedItems} from '@sentry/scraps/compactSelect/useVirtualizedItems';
 import {Container} from '@sentry/scraps/layout';
+import type {FormSize} from '@sentry/scraps/theme';
 import {useTranslation} from '@sentry/scraps/translation/useTranslation';
 
-import type {FormSize} from 'sentry/utils/theme';
-
 import {ListBoxOption} from './option';
 import {ListBoxSection} from './section';
 

@@ -1,8 +1,9 @@
 import {useRef} from 'react';
 import type {Node} from '@react-types/shared';
 
+import type {FormSize} from '@sentry/scraps/theme';
+
 import {useVirtualRows} from 'sentry/components/tables/useVirtualRows';
-import type {FormSize} from 'sentry/utils/theme';
 
 const heightEstimations = {
   sm: {regular: 32, large: 49},

@@ -4,8 +4,7 @@ import {ListBox} from '@sentry/scraps/compactSelect';
 import {Input} from '@sentry/scraps/input';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
-
-import type {FormSize} from 'sentry/utils/theme';
+import type {FormSize} from '@sentry/scraps/theme';
 
 // Emotion retains Input's ref type after changing the rendered element.
 const InputDiv = Input.withComponent('div') as React.ComponentType<

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type {AnyUseQueryOptions} from '@tanstack/react-query';
 
-import type {FormSize} from 'sentry/utils/theme';
+import type {FormSize} from '@sentry/scraps/theme';
 
 import type {ComposerValue} from './model';
 

@@ -4,8 +4,7 @@ import styled from '@emotion/styled';
 
 import type {CSS} from '@sentry/scraps/cssTypes';
 import {getSpacing, rc, type Responsive} from '@sentry/scraps/layout';
-
-import type {SpaceSize} from 'sentry/utils/theme';
+import type {SpaceSize} from '@sentry/scraps/theme';
 
 export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
   /**

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 import type {CSS} from '@sentry/scraps/cssTypes';
 import type {Responsive} from '@sentry/scraps/layout';
 import {getRadius, rc} from '@sentry/scraps/layout';
-
-import type {RadiusSize} from 'sentry/utils/theme';
+import type {RadiusSize} from '@sentry/scraps/theme';
 
 export interface ImageProps extends Omit<
   React.ImgHTMLAttributes<HTMLImageElement>,

@@ -12,8 +12,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import type {InputProps} from '@sentry/scraps/input';
-
-import type {FormSize, StrictCSSObject, Theme} from 'sentry/utils/theme';
+import type {FormSize, StrictCSSObject, Theme} from '@sentry/scraps/theme';
 
 // There is a cycle here if we import textarea from scraps.
 // eslint-disable-next-line @sentry/no-relative-import-paths

@@ -1,6 +1,6 @@
 import {type Theme} from '@emotion/react';
 
-import {type FormSize, type StrictCSSObject} from 'sentry/utils/theme';
+import {type FormSize, type StrictCSSObject} from '@sentry/scraps/theme';
 
 export interface InputStylesProps {
   monospace?: boolean;

@@ -8,11 +8,11 @@ import {mergeRefs} from '@react-aria/utils';
 
 import InteractionStateLayer from '@sentry/scraps/interactionStateLayer';
 import {Container} from '@sentry/scraps/layout';
+import type {FormSize, Theme} from '@sentry/scraps/theme';
 import type {TooltipProps} from '@sentry/scraps/tooltip';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
-import type {FormSize, Theme} from 'sentry/utils/theme';
 
 /**
  * Menu item priority. Determines the text and background color.

@@ -80,7 +80,7 @@ For consistency, token scales and `variant` properties have been standardized wi
 
 > [!TIP]
 >
-> `sentry/utils/theme` exposes standardized, public types for `SurfaceVariant`, `SemanticVariant`, `ContentVariant`, `GraphicsVariant`, and `BorderVariant`.
+> `@sentry/scraps/theme` exposes standardized, public types for `SurfaceVariant`, `SemanticVariant`, `ContentVariant`, `GraphicsVariant`, and `BorderVariant`.
 
 | Keyword     | Description                                                   |
 | ----------- | ------------------------------------------------------------- |

@@ -1,8 +1,9 @@
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
+import type {StrictCSSObject, Theme} from '@sentry/scraps/theme';
+
 import {growIn} from 'sentry/styles/animations';
-import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
 
 interface RadioProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,