fix(ui): Chart tooltip colors (#30170)

* fix(ui): Chart tooltip colors

Chart tooltips currently use gray500 as their background color. This doesn't work in the new, two-palette color system (#29917). Instead, they should use backgroundElevated (surface300).

* fix(ui): Use gray300 for RequestInterface's icon

Gray 200 is not an accessible icon color. We should use the subText color alias instead.

* Revert "fix(ui): Use gray300 for RequestInterface's icon"

This reverts commit b353b6d5b9116fbaa7fac812be2214d289a0d8f5.

static/app/components/charts/baseChart.tsx

@@ -486,15 +486,22 @@ function BaseChartUnwrapped({
 // elements directly
 const ChartContainer = styled('div')`
   /* Tooltip styling */
+  .tooltip-container {
+    box-shadow: ${p => p.theme.dropShadowHeavy};
+  }
   .tooltip-series,
   .tooltip-date {
-    color: ${p => p.theme.gray300};
+    color: ${p => p.theme.subText};
     font-family: ${p => p.theme.text.family};
     font-variant-numeric: tabular-nums;
-    background: ${p => p.theme.gray500};
+    background: ${p => p.theme.backgroundElevated};
     padding: ${space(1)} ${space(2)};
+    border: solid 1px ${p => p.theme.border};
     border-radius: ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0 0;
   }
+  .tooltip-series {
+    border-bottom: none;
+  }
   .tooltip-series-solo {
     border-radius: ${p => p.theme.borderRadius};
   }
@@ -503,7 +510,7 @@ const ChartContainer = styled('div')`
   }
   .tooltip-label strong {
     font-weight: normal;
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.textColor};
   }
   .tooltip-label-indent {
     margin-left: ${space(3)};
@@ -514,24 +521,32 @@ const ChartContainer = styled('div')`
     align-items: baseline;
   }
   .tooltip-date {
-    border-top: 1px solid ${p => p.theme.gray400};
+    border-top: solid 1px ${p => p.theme.innerBorder};
     text-align: center;
     position: relative;
     width: auto;
     border-radius: ${p => p.theme.borderRadiusBottom};
   }
   .tooltip-arrow {
-    top: 100%;
+    top: calc(100% - 1px);
     left: 50%;
-    border: 0px solid transparent;
-    content: ' ';
-    height: 0;
-    width: 0;
     position: absolute;
     pointer-events: none;
-    border-top-color: ${p => p.theme.gray500};
-    border-width: 8px;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid ${p => p.theme.backgroundElevated};
     margin-left: -8px;
+    &:before {
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+      border-top: 9px solid ${p => p.theme.border};
+      content: '';
+      display: block;
+      position: absolute;
+      top: -8px;
+      left: -9px;
+      z-index: -1;
+    }
   }
 
   .echarts-for-react div:first-of-type {

static/app/components/charts/components/tooltip.tsx

@@ -201,7 +201,7 @@ function getFormatter({
         seriesParamsOrParam
       );
 
-    return [
+    const tooltipContent = [
       '<div class="tooltip-series">',
       seriesParams
         .filter(getFilter)
@@ -224,6 +224,8 @@ function getFormatter({
       `<div class="tooltip-date">${date}</div>`,
       `<div class="tooltip-arrow"></div>`,
     ].join('');
+
+    return `<div class="tooltip-container">${tooltipContent}</div>`;
   };
 
   return formatter;

static/app/utils/theme.tsx

@@ -56,7 +56,7 @@ const darkColors = {
 
   surface100: '#1A141F',
   surface200: '#241D2A',
-  surface300: '#2E2734',
+  surface300: '#2C2433',
 
   gray500: '#EBE6EF',
   gray400: '#D6D0DC',
@@ -95,6 +95,18 @@ const darkColors = {
   pink100: 'rgba(250, 51, 150, 0.13)',
 };
 
+const lightShadows = {
+  dropShadowLightest: '0 0 2px rgba(43, 34, 51, 0.04)',
+  dropShadowLight: '0 1px 4px rgba(43, 34, 51, 0.04)',
+  dropShadowHeavy: '0 4px 24px rgba(43, 34, 51, 0.12)',
+};
+
+const darkShadows = {
+  dropShadowLightest: '0 0 2px rgba(10, 8, 12, 0.2)',
+  dropShadowLight: '0 1px 4px rgba(10, 8, 12, 0.2)',
+  dropShadowHeavy: '0 4px 24px rgba(10, 8, 12, 0.36)',
+};
+
 type BaseColors = typeof lightColors;
 
 const generateAliases = (colors: BaseColors) => ({
@@ -118,6 +130,11 @@ const generateAliases = (colors: BaseColors) => ({
    */
   background: colors.surface200,
 
+  /**
+   * Elevated background color
+   */
+  backgroundElevated: colors.surface300,
+
   /**
    * Secondary background color used as a slight contrast against primary background
    */
@@ -500,6 +517,8 @@ const commonTheme = {
 
   ...lightColors,
 
+  ...lightShadows,
+
   iconSizes,
 
   iconDirections: {
@@ -580,10 +599,6 @@ const commonTheme = {
   headerSelectorRowHeight: 44,
   headerSelectorLabelHeight: 28,
 
-  dropShadowLightest: '0 0 2px rgba(43, 34, 51, 0.04)',
-  dropShadowLight: '0 1px 4px rgba(43, 34, 51, 0.04)',
-  dropShadowHeavy: '0 4px 24px rgba(43, 34, 51, 0.08)',
-
   // Relative font sizes
   fontSizeRelativeSmall: '0.9em',
 
@@ -667,6 +682,7 @@ export const lightTheme = {
   ...commonTheme,
   ...lightColors,
   ...lightAliases,
+  ...lightShadows,
   alert: generateAlertTheme(lightColors, lightAliases),
   badge: generateBadgeTheme(lightColors),
   button: generateButtonTheme(lightColors, lightAliases),
@@ -682,6 +698,7 @@ export const darkTheme: Theme = {
   ...commonTheme,
   ...darkColors,
   ...darkAliases,
+  ...darkShadows,
   alert: generateAlertTheme(darkColors, darkAliases),
   badge: generateBadgeTheme(darkColors),
   button: generateButtonTheme(darkColors, darkAliases),