ref(ui): remove usages of DO_NOT_USE_ChonkTheme (#104439)

There is now only one `Theme`, and we can use `darkTheme` and
`lightTheme` directly (even though we need to eslint-disable the import,
as they are discouraged, but there are a few places where we need direct
theme access).

Author: TkDodo

static/app/components/assigneeBadge.tsx

@@ -12,7 +12,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Actor} from 'sentry/types/core';
 import type {SuggestedOwnerReason} from 'sentry/types/group';
-import type {DO_NOT_USE_ChonkTheme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 
 type AssigneeBadgeProps = {
@@ -161,7 +161,7 @@ const UnassignedTag = withChonk(
   styled(StyledTag)`
     border-style: dashed;
   `,
-  styled(StyledTag)<{theme: DO_NOT_USE_ChonkTheme}>`
+  styled(StyledTag)<{theme: Theme}>`
     border: 1px dashed ${p => p.theme.border};
     background-color: transparent;
   `

static/app/components/core/avatar/letterAvatar.tsx

@@ -3,7 +3,7 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import color from 'color';
 
-import type {DO_NOT_USE_ChonkTheme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
 import {baseAvatarStyles, type BaseAvatarStyleProps} from './baseAvatarComponentStyles';
@@ -103,7 +103,7 @@ function getColor(identifier: string | undefined): Color {
 
 function getChonkColor(
   identifier: string | undefined,
-  theme: DO_NOT_USE_ChonkTheme
+  theme: Theme
 ): {
   background: string;
   content: string;
@@ -131,7 +131,7 @@ function getInitials(displayName: string | undefined) {
   return initials.toUpperCase();
 }
 
-function makeChonkLetterAvatarColors(theme: DO_NOT_USE_ChonkTheme) {
+function makeChonkLetterAvatarColors(theme: Theme) {
   return theme.chart.getColorPalette(9).map(c => ({
     background: c,
     content: color(c).isDark() ? theme.colors.white : theme.colors.black,

static/app/components/core/badge/alertBadge.chonk.tsx

@@ -1,13 +1,13 @@
 import type {AlertBadgeProps} from 'sentry/components/core/badge/alertBadge';
-import type {DO_NOT_USE_ChonkTheme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 import {chonkStyled} from 'sentry/utils/theme/theme';
 import {IncidentStatus} from 'sentry/views/alerts/types';
 
 function makeChonkAlertBadgeDiamondBackgroundTheme(
   status: AlertBadgeProps['status'],
   isIssue: AlertBadgeProps['isIssue'],
   isDisabled: AlertBadgeProps['isDisabled'],
-  theme: DO_NOT_USE_ChonkTheme
+  theme: Theme
 ): React.CSSProperties {
   if (isDisabled) {
     return {

static/app/components/core/badge/tag.chonk.tsx

@@ -1,6 +1,6 @@
 import type {TagProps} from 'sentry/components/core/badge/tag';
 import {space} from 'sentry/styles/space';
-import type {DO_NOT_USE_ChonkTheme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 import {chonkStyled} from 'sentry/utils/theme/theme';
 import {unreachable} from 'sentry/utils/unreachable';
 
@@ -43,10 +43,7 @@ export const TagPill = chonkStyled('div')<{
   }
 `;
 
-function makeTagPillTheme(
-  type: TagType | undefined,
-  theme: DO_NOT_USE_ChonkTheme
-): React.CSSProperties {
+function makeTagPillTheme(type: TagType | undefined, theme: Theme): React.CSSProperties {
   switch (type) {
     case undefined:
     case 'default':

static/app/components/core/button/styles.chonk.tsx

@@ -1,7 +1,7 @@
 import type {DO_NOT_USE_ButtonProps as ButtonProps} from 'sentry/components/core/button/types';
 import {chonkFor} from 'sentry/components/core/chonk';
 // eslint-disable-next-line boundaries/element-types
-import type {DO_NOT_USE_ChonkTheme, StrictCSSObject} from 'sentry/utils/theme';
+import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
 
 // @TODO: remove Link type in the future
 type ChonkButtonType =
@@ -43,7 +43,7 @@ const chonkHoverElevation = '1px';
 export function DO_NOT_USE_getChonkButtonStyles(
   p: Pick<ButtonProps, 'priority' | 'busy' | 'disabled' | 'borderless'> & {
     size: NonNullable<ButtonProps['size']>;
-    theme: DO_NOT_USE_ChonkTheme;
+    theme: Theme;
   }
 ): StrictCSSObject {
   const type = chonkPriorityToType(p.priority);
@@ -254,7 +254,7 @@ export function DO_NOT_USE_getChonkButtonStyles(
   };
 }
 
-function getChonkButtonTheme(type: ChonkButtonType, theme: DO_NOT_USE_ChonkTheme) {
+function getChonkButtonTheme(type: ChonkButtonType, theme: Theme) {
   switch (type) {
     case 'default':
       return {
@@ -299,7 +299,7 @@ function getChonkButtonTheme(type: ChonkButtonType, theme: DO_NOT_USE_ChonkTheme
 
 function getChonkButtonSizeTheme(
   size: ButtonProps['size'],
-  theme: DO_NOT_USE_ChonkTheme
+  theme: Theme
 ): StrictCSSObject {
   switch (size) {
     case 'md':

static/app/components/core/chonk.ts

@@ -1,10 +1,10 @@
 import color from 'color';
 
-import type {DO_NOT_USE_ChonkTheme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 
 const chonkCache = new Map<{baseColor: string; type: 'light' | 'dark'}, string>();
 
-export function chonkFor(theme: DO_NOT_USE_ChonkTheme, baseColor: string) {
+export function chonkFor(theme: Theme, baseColor: string) {
   const cacheKey = {baseColor, type: theme.type};
   if (chonkCache.has(cacheKey)) {
     return chonkCache.get(cacheKey)!;
@@ -23,7 +23,7 @@ export function chonkFor(theme: DO_NOT_USE_ChonkTheme, baseColor: string) {
   return result;
 }
 
-export function debossedBackground(theme: DO_NOT_USE_ChonkTheme) {
+export function debossedBackground(theme: Theme) {
   return {
     backgroundColor: theme.type === 'dark' ? 'rgba(8,0,24,0.28)' : 'rgba(0,0,112,0.03)',
   };

static/app/components/core/code/codeBlock.tsx

@@ -8,7 +8,8 @@ import {IconCopy} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {loadPrismLanguage} from 'sentry/utils/prism';
-import {DO_NOT_USE_darkChonkTheme} from 'sentry/utils/theme/theme';
+// eslint-disable-next-line no-restricted-imports
+import {darkTheme} from 'sentry/utils/theme/theme';
 
 interface CodeBlockProps {
   children: string;
@@ -209,11 +210,7 @@ export function CodeBlock({
 
   // Override theme provider when in dark mode to provider dark theme to
   // components
-  return (
-    <ThemeProvider theme={dark ? (DO_NOT_USE_darkChonkTheme as any) : theme}>
-      {snippet}
-    </ThemeProvider>
-  );
+  return <ThemeProvider theme={dark ? darkTheme : theme}>{snippet}</ThemeProvider>;
 }
 
 const FlexSpacer = styled('div')`

static/app/components/core/input/input.chonk.tsx

@@ -1,5 +1,5 @@
 import {debossedBackground} from 'sentry/components/core/chonk';
-import type {DO_NOT_USE_ChonkTheme, StrictCSSObject} from 'sentry/utils/theme';
+import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
 
 import type {InputStylesProps} from './input';
 
@@ -8,7 +8,7 @@ export const chonkInputStyles = ({
   monospace,
   readOnly,
   size = 'md',
-}: InputStylesProps & {theme: DO_NOT_USE_ChonkTheme}): StrictCSSObject => {
+}: InputStylesProps & {theme: Theme}): StrictCSSObject => {
   const boxShadow = `0px 1px 0px 0px ${theme.tokens.border.primary} inset`;
 
   return {

static/app/components/core/input/inputGroup.chonk.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Input} from 'sentry/components/core/input/index';
 import {TextArea} from 'sentry/components/core/textarea';
 import {space} from 'sentry/styles/space';
-import type {DO_NOT_USE_ChonkTheme, FormSize, StrictCSSObject} from 'sentry/utils/theme';
+import type {FormSize, StrictCSSObject, Theme} from 'sentry/utils/theme';
 import {chonkStyled} from 'sentry/utils/theme/theme';
 
 export interface InputStyleProps {
@@ -35,7 +35,7 @@ const chonkInputStyles = ({
   trailingWidth,
   size = 'md',
   theme,
-}: InputStyleProps & {theme: DO_NOT_USE_ChonkTheme}): StrictCSSObject => css`
+}: InputStyleProps & {theme: Theme}): StrictCSSObject => css`
   ${leadingWidth &&
   css`
     padding-left: calc(

static/app/components/core/layout/styles.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useMemo, useSyncExternalStore} from 'react';
 import {css, useTheme, type SerializedStyles} from '@emotion/react';
 
-import type {DO_NOT_USE_ChonkTheme, Theme} from 'sentry/utils/theme';
+import type {Theme} from 'sentry/utils/theme';
 import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
 // It is unfortunate, but Emotion seems to use the fn callback name in the classname, so lets keep it short.
@@ -65,7 +65,7 @@ const BREAKPOINT_ORDER: readonly Breakpoint[] = [
 ];
 
 // We alias None -> 0 to make it slighly more terse and easier to read.
-export type RadiusSize = keyof DO_NOT_USE_ChonkTheme['radius'];
+export type RadiusSize = keyof Theme['radius'];
 export type SpacingSize = keyof Theme['space'];
 export type Border = keyof Theme['tokens']['border'];
 export type Breakpoint = keyof Theme['breakpoints'];