theme: new chart colors (#89878)

New chonk chart colors. We'll fix what breaks as it gets reported, there
are many places that seem to hand pick certain colors off the them, but
I'm not sure if that is intentional, or if they were just picked because
they looked the nicest

Author: JonasBa

static/app/components/charts/baseChart.tsx

@@ -402,7 +402,7 @@ function BaseChart({
     resolveColors ||
     (series.length
       ? theme.chart.getColorPalette(series.length)
-      : theme.chart.colors[theme.chart.colors.length - 1]);
+      : theme.chart.getColorPalette(theme.chart.colors.length - 1));
 
   const resolvedSeries = useMemo(() => {
     const previousPeriodColors =

static/app/components/performance/waterfall/utils.tsx

@@ -250,7 +250,8 @@ export const pickBarColor = (input: string | undefined, theme: Theme): string =>
   const barColors = makeBarColors(theme);
 
   if (!input || input.length < 3) {
-    return theme.chart.colors[17][4];
+    const colors = theme.chart.getColorPalette(17);
+    return colors[4]!;
   }
 
   // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message

static/app/components/themeAndStyleProvider.tsx

@@ -1,6 +1,7 @@
 import {Fragment, useEffect} from 'react';
 import {createPortal} from 'react-dom';
 import createCache from '@emotion/cache';
+import type {Theme} from '@emotion/react';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
 
 import {loadPreferencesState} from 'sentry/actionCreators/preferences';
@@ -35,8 +36,8 @@ export function ThemeAndStyleProvider({children}: Props) {
   const theme = useThemeSwitcher();
 
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles isDark={config.theme === 'dark'} theme={theme} />
+    <ThemeProvider theme={theme as Theme}>
+      <GlobalStyles isDark={config.theme === 'dark'} theme={theme as Theme} />
       <CacheProvider value={cache}>{children}</CacheProvider>
       {createPortal(
         <Fragment>

static/app/components/userMisery.tsx

@@ -16,14 +16,15 @@ type Props = {
 
 function UserMisery(props: Props) {
   const theme = useTheme();
+  const colors = theme.chart.getColorPalette(0);
   const {bars, barHeight, userMisery, miseryLimit, totalUsers, miserableUsers} = props;
   // User Misery will always be > 0 because of the maximum a posteriori estimate
   // and below 5% will always be an overestimation of the actual proportion
   // of miserable to total unique users. We are going to visualize it as
   // 0 User Misery while still preserving the actual value for sorting purposes.
   const adjustedMisery = userMisery > 0.05 ? userMisery : 0;
 
-  const palette = new Array(bars).fill(theme.chart.colors[0][0]);
+  const palette = new Array(bars).fill(colors[0][0]);
   const score = Math.round(adjustedMisery * palette.length);
 
   let title: React.ReactNode;

static/app/utils/profiling/flamegraph/flamegraphTheme.tsx

@@ -180,7 +180,9 @@ const SIZES: FlamegraphTheme['SIZES'] = {
   CHART_PX_PADDING: 30,
 };
 
-function makeFlamegraphFonts(theme: Theme): FlamegraphTheme['FONTS'] {
+function makeFlamegraphFonts(
+  theme: Theme | DO_NOT_USE_ChonkTheme
+): FlamegraphTheme['FONTS'] {
   return {
     FONT: MONOSPACE_FONT,
     FRAME_FONT: theme.text.familyMono,
@@ -189,6 +191,7 @@ function makeFlamegraphFonts(theme: Theme): FlamegraphTheme['FONTS'] {
 
 /** Legacy theme definitions */
 export function makeLightFlamegraphTheme(theme: Theme): FlamegraphTheme {
+  const chartColors = theme.chart.getColorPalette(12);
   return {
     LCH: LCH_LIGHT,
     SIZES,
@@ -207,10 +210,10 @@ export function makeLightFlamegraphTheme(theme: Theme): FlamegraphTheme {
         'by frequency': makeColorMapByFrequency,
         'by system vs application frame': makeColorMapBySystemVsApplicationFrame,
       },
-      CPU_CHART_COLORS: theme.chart.colors[12].map(c => hexToColorChannels(c, 0.8)),
+      CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
-        hexToColorChannels(theme.chart.colors[4][2], 0.8),
-        hexToColorChannels(theme.chart.colors[4][3], 0.8),
+        hexToColorChannels(chartColors[2], 0.8),
+        hexToColorChannels(chartColors[3], 0.8),
       ],
       CHART_CURSOR_INDICATOR: 'rgba(31,35,58,.75)',
       CHART_LABEL_COLOR: 'rgba(31,35,58,.75)',
@@ -246,6 +249,7 @@ export function makeLightFlamegraphTheme(theme: Theme): FlamegraphTheme {
 }
 
 export function makeDarkFlamegraphTheme(theme: Theme): FlamegraphTheme {
+  const chartColors = theme.chart.getColorPalette(12);
   return {
     LCH: LCH_DARK,
     SIZES,
@@ -264,10 +268,10 @@ export function makeDarkFlamegraphTheme(theme: Theme): FlamegraphTheme {
         'by frequency': makeColorMapByFrequency,
         'by system vs application frame': makeColorMapBySystemVsApplicationFrame,
       },
-      CPU_CHART_COLORS: theme.chart.colors[12].map(c => hexToColorChannels(c, 0.8)),
+      CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
-        hexToColorChannels(theme.chart.colors[4][2], 0.5),
-        hexToColorChannels(theme.chart.colors[4][3], 0.5),
+        hexToColorChannels(chartColors[2], 0.5),
+        hexToColorChannels(chartColors[3], 0.5),
       ],
       CHART_CURSOR_INDICATOR: 'rgba(255, 255, 255, 0.5)',
       CHART_LABEL_COLOR: 'rgba(255, 255, 255, 0.5)',
@@ -321,6 +325,8 @@ const SPAN_LCH_LIGHT_CHONK = {
 export const makeLightChonkFlamegraphTheme = (
   theme: DO_NOT_USE_ChonkTheme
 ): FlamegraphTheme => {
+  const chartColors = theme.chart.getColorPalette(12);
+
   return {
     LCH: LCH_LIGHT_CHONK,
     SIZES,
@@ -339,7 +345,7 @@ export const makeLightChonkFlamegraphTheme = (
       },
 
       // Charts
-      CPU_CHART_COLORS: theme.chart.colors[12].map(c => hexToColorChannels(c, 0.8)),
+      CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
         hexToColorChannels(theme.colors.yellow400, 1),
         hexToColorChannels(theme.colors.red400, 1),
@@ -410,6 +416,7 @@ const SPANS_LCH_DARK_CHONK = {
 export const makeDarkChonkFlamegraphTheme = (
   theme: DO_NOT_USE_ChonkTheme
 ): FlamegraphTheme => {
+  const chartColors = theme.chart.getColorPalette(12);
   return {
     LCH: LCH_DARK_CHONK,
     SIZES,
@@ -428,7 +435,7 @@ export const makeDarkChonkFlamegraphTheme = (
       },
 
       // Charts
-      CPU_CHART_COLORS: theme.chart.colors[12].map(c => hexToColorChannels(c, 0.8)),
+      CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
         hexToColorChannels(theme.colors.yellow400, 1),
         hexToColorChannels(theme.colors.red400, 1),