fix(agent-insights): Invisible icons in span details (#94173)

Some icons inside the span details were invisible as they are styled
with css variables which were not available.
This PR exports those variable definitions and adds them in relevant
places.

- closes [TET-702: Invisible icons in span
details](https://linear.app/getsentry/issue/TET-702/invisible-icons-in-span-details)

Author: ArthurKnaus

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -74,6 +74,7 @@ import {
   useTraceState,
   useTraceStateDispatch,
 } from 'sentry/views/performance/newTraceDetails/traceState/traceStateProvider';
+import {traceGridCssVariables} from 'sentry/views/performance/newTraceDetails/traceWaterfallStyles';
 
 import type {KeyValueActionParams, TraceDrawerActionKind} from './utils';
 import {getTraceKeyValueActions, TraceDrawerActionValueKind} from './utils';
@@ -91,6 +92,7 @@ const BodyContainer = styled('div')`
 `;
 
 const DetailContainer = styled('div')`
+  ${traceGridCssVariables}
   height: 100%;
   overflow: hidden;
   padding: ${space(1)} ${space(2)};
@@ -1281,7 +1283,7 @@ const MultilineTextLabel = styled('div')`
   margin-bottom: ${space(1)};
 `;
 
-const TraceDrawerComponents = {
+export const TraceDrawerComponents = {
   DetailContainer,
   BodyContainer,
   FlexBox,
@@ -1316,5 +1318,3 @@ const TraceDrawerComponents = {
   MultilineJSON,
   MultilineTextLabel,
 };
-
-export {TraceDrawerComponents};

static/app/views/performance/newTraceDetails/traceWaterfall.tsx

@@ -40,6 +40,7 @@ import {isTraceItemDetailsResponse} from 'sentry/views/performance/newTraceDetai
 import {TraceLinkNavigationButton} from 'sentry/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton';
 import {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import {TraceOpenInExploreButton} from 'sentry/views/performance/newTraceDetails/traceOpenInExploreButton';
+import {traceGridCssVariables} from 'sentry/views/performance/newTraceDetails/traceWaterfallStyles';
 import {useDividerResizeSync} from 'sentry/views/performance/newTraceDetails/useDividerResizeSync';
 import {useIsEAPTraceEnabled} from 'sentry/views/performance/newTraceDetails/useIsEAPTraceEnabled';
 import {useTraceSpaceListeners} from 'sentry/views/performance/newTraceDetails/useTraceSpaceListeners';
@@ -842,16 +843,7 @@ const TraceLinksNavigationContainer = styled('div')`
 export const TraceGrid = styled('div')<{
   layout: 'drawer bottom' | 'drawer left' | 'drawer right';
 }>`
-  --info: ${p => p.theme.purple400};
-  --warning: ${p => p.theme.yellow300};
-  --debug: ${p => p.theme.blue300};
-  --error: ${p => p.theme.error};
-  --fatal: ${p => p.theme.error};
-  --default: ${p => p.theme.gray300};
-  --unknown: ${p => p.theme.gray300};
-  --profile: ${p => p.theme.purple300};
-  --autogrouped: ${p => p.theme.blue300};
-  --occurence: ${p => p.theme.blue300};
+  ${traceGridCssVariables}
 
   background-color: ${p => p.theme.background};
   border: 1px solid ${p => p.theme.border};

static/app/views/performance/newTraceDetails/traceWaterfallStyles.tsx

@@ -0,0 +1,14 @@
+import type {Theme} from '@emotion/react';
+
+export const traceGridCssVariables = ({theme}: {theme: Theme}) => `
+  --info: ${theme.purple400};
+  --warning: ${theme.yellow300};
+  --debug: ${theme.blue300};
+  --error: ${theme.error};
+  --fatal: ${theme.error};
+  --default: ${theme.gray300};
+  --unknown: ${theme.gray300};
+  --profile: ${theme.purple300};
+  --autogrouped: ${theme.blue300};
+  --occurence: ${theme.blue300};
+`;