fix(chonk-ui): compute avatar colors from chart palette (#95240)

Author: TkDodo

static/app/components/core/avatar/index.stories.tsx

@@ -17,8 +17,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar user={user} />'}</code> component displays an avatar for a
-          user.
+          The <code>{'<UserAvatar user={user} />'}</code> component displays an avatar for
+          a user.
         </p>
         <UserAvatar
           user={{
@@ -41,8 +41,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar team={team} />'}</code> component displays an avatar for a
-          team.
+          The <code>{'<TeamAvatar team={team} />'}</code> component displays an avatar for
+          a team.
         </p>
         <TeamAvatar
           team={{
@@ -73,8 +73,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar project={project} />'}</code> component displays an avatar
-          for a project.
+          The <code>{'<ProjectAvatar project={project} />'}</code> component displays an
+          avatar for a project.
         </p>
         <ProjectAvatar
           project={{
@@ -89,8 +89,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar organization={organization} />'}</code> component displays
-          an avatar for an organization.
+          The <code>{'<OrganizationAvatar organization={organization} />'}</code>{' '}
+          component displays an avatar for an organization.
         </p>
         <OrganizationAvatar
           organization={{
@@ -131,8 +131,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar sentryApp={sentryApp} />'}</code> component displays an
-          avatar for a SentryApp.
+          The <code>{'<SentryAppAvatar sentryApp={sentryApp} />'}</code> component
+          displays an avatar for a SentryApp.
         </p>
         <SentryAppAvatar
           sentryApp={{
@@ -149,8 +149,8 @@ export default Storybook.story('Avatar', (story, APIReference) => {
     return (
       <Fragment>
         <p>
-          The <code>{'<Avatar docIntegration={docIntegration} />'}</code> component
-          displays an avatar for a doc integration.
+          The <code>{'<DocIntegrationAvatar docIntegration={docIntegration} />'}</code>{' '}
+          component displays an avatar for a doc integration.
         </p>
         <DocIntegrationAvatar
           docIntegration={{

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

@@ -2,6 +2,7 @@ import type React from 'react';
 import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
+import color from 'color';
 
 import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
@@ -10,8 +11,8 @@ import {type BaseAvatarStyleProps, baseAvatarStyles} from './baseAvatarComponent
 interface LetterAvatarProps
   extends React.HTMLAttributes<SVGSVGElement>,
     BaseAvatarStyleProps {
+  identifier: string | undefined;
   displayName?: string;
-  identifier?: string;
   ref?: React.Ref<SVGSVGElement>;
 }
 
@@ -130,30 +131,9 @@ function getInitials(displayName: string | undefined) {
   return initials.toUpperCase();
 }
 
-function makeChonkLetterAvatarColors(theme: DO_NOT_USE_ChonkTheme): Array<{
-  background: string;
-  content: string;
-}> {
-  return [
-    {
-      background: theme.colors.chonk.blue400,
-      content: theme.colors.white,
-    },
-    {
-      background: theme.colors.chonk.pink400,
-      content: theme.colors.black,
-    },
-    {
-      background: theme.colors.chonk.red400,
-      content: theme.colors.white,
-    },
-    {
-      background: theme.colors.chonk.yellow400,
-      content: theme.colors.black,
-    },
-    {
-      background: theme.colors.chonk.green400,
-      content: theme.colors.black,
-    },
-  ];
+function makeChonkLetterAvatarColors(theme: DO_NOT_USE_ChonkTheme) {
+  return theme.chart.getColorPalette(9).map(c => ({
+    background: c,
+    content: color(c).isDark() ? theme.colors.white : theme.colors.black,
+  }));
 }

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

@@ -4,7 +4,7 @@ import {explodeSlug} from 'sentry/utils';
 import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
 
 interface OrganizationAvatarProps extends BaseAvatarProps {
-  organization?: OrganizationSummary;
+  organization: OrganizationSummary | undefined;
   ref?: React.Ref<HTMLSpanElement>;
 }
 
@@ -18,7 +18,7 @@ export function OrganizationAvatar({
     return null;
   }
 
-  const slug = organization?.slug || '';
+  const slug = organization.slug || '';
   const title = explodeSlug(slug);
 
   return (

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

@@ -4,10 +4,10 @@ import type {AvatarSentryApp} from 'sentry/types/integrations';
 import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
 
 interface SentryAppAvatarProps extends BaseAvatarProps {
+  sentryApp: AvatarSentryApp | undefined;
   isColor?: boolean;
   isDefault?: boolean;
   ref?: React.Ref<HTMLSpanElement>;
-  sentryApp?: AvatarSentryApp;
 }
 
 export function SentryAppAvatar({

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

@@ -7,10 +7,10 @@ import {userDisplayName} from 'sentry/utils/formatters';
 import {BaseAvatar, type BaseAvatarProps} from './baseAvatar';
 
 export interface UserAvatarProps extends BaseAvatarProps {
+  user: Actor | AvatarUser | undefined;
   gravatar?: boolean;
   ref?: React.Ref<HTMLSpanElement | SVGSVGElement | HTMLImageElement>;
   renderTooltip?: (user: AvatarUser | Actor) => React.ReactNode;
-  user?: Actor | AvatarUser;
 }
 
 export function UserAvatar({